Tecnología

Inicio

Cómo obtener el texto que comience en el margen izquierdo en anidada listas ordenadas en HTML

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.