Cómo alinear una lista no ordenada en HTML

Contenido

• instrucciones

Los diseñadores web usan listas "no ordenadas" o "marcadores" para más que sólo añadir marcadores y texto. La etiqueta HTML, utilizada para crear listas no ordenadas, es útil para crear menús y organizar imágenes para que un JavaScript las cargue en una presentación. Aprender a usar código CSS ("Estilo de cascada") junto con estas listas, abrirá numerosas posibilidades de diseño web. La alineación de listas no ordenadas es una habilidad muy importante para mejorar.

instrucciones

Utilice código CSS para alinear listas no ordenadas en HTML (Jupiterimages / Photos.com / Getty Images)

1. Abra el archivo HTML que contiene la lista no ordenada y mire entre las etiquetas y en la parte superior del código. Añadir etiquetas> y si no están todavía presentes. Si su código incluye una etiqueta

2. en alguna parte después de, y que contiene una referencia a un archivo CSS, abra este archivo. Su código CSS entre las etiquetas> y o en una nueva línea de su archivo CSS.

3. Alinee el texto dentro de los marcadores configurando la propiedad "text-align" de su etiqueta

   . Esto implica las etiquetas
   • y
   para definirlas como parte de una lista única. Al alinear el texto en la etiqueta
   , se afectarán todos los elementos de la lista, pero no la lista en sí, a la izquierda oa la derecha de la página. Un ejemplo de uso de código CSS para configurar la propiedad "text-align", utilice "ul {text-align: right;}". Tenga en cuenta que los marcadores no se moverán con el texto. En este caso, se quedarán a la izquierda.

4. Alinee la lista entera a la izquierda oa la derecha de la página configurando la propiedad "float" de su etiqueta

   . Esta propiedad afecta a toda la lista moviéndola a la izquierda oa la derecha de la página. Escriba el código "ul {float: right;}".

   Puede configurar esta propiedad a la izquierda oa la derecha, pero no al centro.

   
   

5. Envíe sus etiquetas

   con etiquetas y para crear un envoltorio que centrará la lista en la página. El código se verá así: ".
   • Elemento de la lista
   • Elemento de la lista
   '.

   La etiqueta no alineará nada por sí misma; debe utilizar CSS para centrarlo todo. Añade el siguiente código entre las etiquetas> o en tu archivo CSS para centrar la lista: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".