Utilice código CSS para alinear listas con viñetas en HTML.
Los diseñadores web usan listas de viñetas para algo más que agregar viñetas y texto. La etiqueta HTML utilizada para crear listas de viñetas es útil para crear menús u organizar imágenes para que un JavaScript se cargue en una presentación de diapositivas. Aprender a usar el código de la hoja de estilo en cascada junto con las listas de viñetas, llamadas "listas desordenadas" en la jerga HTML, abrirá varias posibilidades interesantes de diseño web.
Paso 1
Abra su archivo HTML que contiene la lista con viñetas y busque entre las etiquetas y hacia la parte superior del código. Agregue etiquetas si aún no están presentes. Si su código incluye un etiqueta en algún lugar después de la etiqueta, y eso contiene una referencia a un archivo CSS, luego abra ese archivo en su lugar. Su código CSS va entre las etiquetas o en una nueva línea de su archivo CSS.
Video del día
Paso 2
Alinee el texto dentro de todas las viñetas configurando "text-align" para su
- etiqueta. El
- y etiquetas para definirlas como parte de una sola lista. Cuando alinea el texto para el
- etiqueta envuelve el
- etiqueta, la alineación afecta el texto en cada viñeta pero no alinea la lista en sí misma a la izquierda o derecha de la página. A continuación, se muestra un ejemplo de código CSS para establecer "alineación de texto":
ul {alineación de texto: derecha;}
Tenga en cuenta que las viñetas no se mueven con el texto. Las balas se quedan a la izquierda en este caso.
Paso 3
Alinee toda la lista a la izquierda oa la derecha de la página configurando "flotar" para su
- etiqueta. Cuando "flotar" se establece a izquierda o derecha en un
- etiqueta, mueve toda la lista con viñetas a la izquierda o derecha de la página. Configure el flotador de esta manera:
ul {flotar: derecha;}
Puede configurar "flotar" a la izquierda o la derecha, pero no al centro.
Etapa 4
Envuelve tu
- etiquetas en
y
etiquetas para crear un contenedor que centrará la lista con viñetas en su página. Su código resultante se verá así:- Elemento de lista
- Elemento de lista
El
la etiqueta no centra nada por sí misma; debes usar CSS para centrar todo. Agregue el siguiente código entre su
