Eximbanker.com

Cómo alinear una bala lista en HTML

Cómo alinear una bala lista en HTML


Diseñadores web usan balas listas para agregar más viñetas y texto. La etiqueta HTML utilizada para crear listas de bala es útil para crear menús u organizar imágenes de JavaScript cargar en una presentación de diapositivas. Aprender a usar código de hoja de estilos en cascada (CSS) en conjunto con las listas de bala--llamado "lista desordenada" en el argot HTML--se abre numerosas posibilidades de diseño Web. Alineación de listas desordenadas es una habilidad importante para dominar.

Instrucciones

•  Abra el archivo HTML que contiene la lista con viñetas y buscar entre el < head > y < / cabeza > Etiquetas hacia la parte superior del código. Agregue estilo de < > y < / estilo > etiquetas si no están ya presentes. Si su código incluye una etiqueta < link > en algún lugar después de la etiqueta < head > y < link > contiene una referencia a un archivo CSS, luego abrir el archivo en su lugar. El código CSS va entre el < > y < / estilo > etiquetas o en una nueva línea de tu CSS file.

•  alinear el texto dentro de balas de todos mediante el establecimiento de "text-align" para la etiqueta < ul >. Ajusta la etiqueta < ul > < li > < /li > Etiquetas para definir como parte de una lista única. Cuando usted alinea el texto de la etiqueta < ul >, la alineación afecta a texto en cada viñeta pero no alinea la lista sí mismo hacia la izquierda o derecha de la página. Aquí está un ejemplo de código CSS para definir el "text-align": ul {texto-alinee: derecho;} Tenga en cuenta que las balas no se muevan con el texto. Las balas Manténgase a la izquierda en este caso.

•  alinear toda la lista a la izquierda o derecha de la página mediante el establecimiento de "flotador" de la etiqueta < ul >. Cuando se establece "flotar" a izquierda o derecha de una etiqueta < ul >, se mueve toda la lista con viñetas hacia la izquierda o derecha de la página. Conjunto flotador como: ul {float: derecho;} Se puede definir a "flotar" a la izquierda o la derecha, pero no en el centro.

•  Enrolle las etiquetas < ul > en < div > y < / div > Etiquetas para crear un contenedor que se centrará la lista con viñetas en tu página. El código resultante tendrá el siguiente aspecto: < div >< ul >< li > elemento de la lista < /li >< li > elemento de la lista < /li >< /ul >< / div > la etiqueta < div > Centro no nada por sí mismo; debe utilizar CSS para centro de todo. Agregue el código siguiente entre las etiquetas < estilo > o en el archivo CSS a la lista con viñetas: div {Mostrar: bloquear; texto-alinee: Centro;} ul {Mostrar: inline-block; alinear texto: izquierda;}