-
Cómo obtener el texto que comience en el margen izquierdo en anidada listas ordenadas en HTML
-
HTML fue desarrollado para ser un sistema de marcado flexible para hacer páginas web que no es específico de cualquier sistema operativo o un navegador web. Esto ha contribuido a hacer de la web un gran éxito, pero a costa de lo que hace difícil para los diseñadores web a crear diseños especialmente diseñadas. CSS fue creado para abordar este problema. Puede introducir código CSS a la página web HTML para hacer cambios precisos, como eliminar el relleno del lado izquierdo en las listas anidadas.Instrucciones
1 Crear su página web muestra. Abra un nuevo archivo en su editor de texto favorito. Guárdelo con el nombre de "lista-example.html" y ponerlo en su escritorio. Escriba el siguiente código HTML en el archivo y guardarlo de nuevo:
<Html>
<Body>
<Ol>
<Li> cosa 1 </ li>
<Ol>
<Li> cosa 1: 1 </ li>
<Li> cosa 1: 2 </ li>
</ Ol>
<Li> cosa 2 </ li>
</ Ol>
</ Body>
</ Html>
2 Encuentra "lista-example.html" en el escritorio y haga doble clic en el icono. El archivo se abrirá en su navegador web favorito. Verá una lista ordenada - "cosa 1" y "2 cosa" - con otra lista ordenada - "cosa 1: 1" y "cosa 1: 2" - anidado dentro de ella. Usted verá que el margen izquierdo de la lista anidada tiene sangría.
3 Vuelve a tu archivo HTML y añadir el atributo CSS "padding-left" a su lista anidada. En la lista ordenada anidado elemento (<ol>), agregue este atributo "estilo":
style = "padding-left: 0px"
Sus listas ordenadas se verán así después del cambio:
<Ol>
<Li> cosa 1 </ li>
<Ol style = "padding-left: 0px">
<Li> cosa 1: 1 </ li>
<Li> cosa 1: 2 </ li>
</ Ol>
<Li> cosa 2 </ li>
</ Ol>
La lista anidada tiene una caja de relleno alrededor de ella de forma predeterminada. El código CSS "padding-left: 0px" establece el lado izquierdo de la caja a cero píxeles de ancho.
Guarda el archivo.
4 Actualizar la página en el navegador. Verá que la lista anidada y su lista de los padres están ahora alineadas a lo largo del margen izquierdo.