Cómo alinear un listado con viñetas en HTML

Escrito por sara williams
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo alinear un listado con viñetas en HTML
(Jupiterimages/Photos.com/Getty Images)

Los diseñadores de páginas de internet usan listas con viñetas para más que un simple texto con viñetas. La etiqueta HTML usada para crear listas con viñetas es útil para crear menues u organizar imágenes para que JavaScript lo cargue en una presentación de diapositivas. Aprender a usar el código de la Hoja con estilo de Cascada (Cascading Style Sheet CSS) junto a las listas con viñetas, llamadas "listas desordenadas" en la jerga de HTML, te abrirá numerosas posibilidades de diseño de páginas web. El alineamiento de listas desordenadas es una habilidad importante de dominar.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML que contenga la lista con viñetas y busca entre las etiquetas y hacia la parte superior del código. Agrega las etiquetas y si todavía no están. Si tu código incluye una etiqueta en algún lugar después de la etiqueta , y ese contiene una referencia a un archivo CSS, entonces abre ese archivo en lugar del actual. El código CSS se ubica entre las etiquetas y ***, o en una nueva línea de tu archivo CSS.

  2. 2

    Alinea el texto entre las viñetas configurando "text-align" para tu etiqueta . Esta etiqueta contiene las etiquetas y para definirlas como parte de una sola lista. Cuando alineas el texto de la etiqueta , esto afecta el texto de cada viñeta pero no alinea a la lista en sí misma, hacia la derecha o la izquierda de la página. Aquí hay un ejemplo de código CSS para configurar el "text-align": ****. Observa que las viñetas no se mueven con el texto, sino que permanecen a la izquierda en este caso.

  3. 3

    Alinea la lista entera hacia la izquierda o la derecha configurando el "float" de tu etiqueta . Cuando el "float" está puesto a la izquierda o derecha de una etiqueta , mueve la lista completa con viñetas hacia la derecha o izquierda de la página. Establece el "float" así: **. Puedes ponerlo a la izquierda o a la derecha, pero no en el centro.

  4. 4

    Incluye tus etiquetas entre etiquetas y para crear un envoltorio que centrará la lista con viñetas en la página. El código resultante lucirá así: **. La etiqueta no centra nada por sí sola; debes usar CSS para centrar todo. Agrega el siguiente código entre tus etiquetas de en tu archivo CSS para centrar la lista con viñetas: ******.

Consejos y advertencias

  • Utiliza el código CSS en listas con viñetas en HTML para crear menús. Configurar las etiquetas *** para que floten hacia la izquierda, las alinea una contra la otra, y configurar el "list-style" en "none" para las etiquetas *** hace que las viñetas desaparezcan. Luego, dale estilo a la lista con viñetas con colores y espaciado para que se adecúe al diseño de tu página de Internet.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles