Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Resumen
La posición de la lista (list-style-position) especifica donde será colocado el marcador de la lista en relación a la caja principal.
valor inicial:a fuera- Se aplica a: elementos con 'display: list-item'
valor heredado: Sí- Porcentajes: n/a
- Medio:
visual valor calculado: como especificado
Sintaxis
list-style-position: inside | outside | inherit
Valores
outside- el marcador se encuentra fuera de la caja principal.
inside- el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos.
Ejemplos
HTML
<ul class="one"> List 1 <li>List Item 1-1</li> <li>List Item 1-2</li> <li>List Item 1-3</li> <li>List Item 1-4</li> </ul> <ul class="two"> List 2 <li>List Item 2-1</li> <li>List Item 2-2</li> <li>List Item 2-3</li> <li>List Item 2-4</li> </ul> <ul class="three"> List 3 <li>List Item 3-1</li> <li>List Item 3-2</li> <li>List Item 3-3</li> <li>List Item 3-4</li> </ul>
CSS
.one {
list-style:square inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
list-style-position: inherit;
}