list-style-position
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
:outside (afuera)
- 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
Ejemplos
HTML
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
css
.one {
list-style: square inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url("starsolid.gif");
list-style-position: inherit;
}