list-style-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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;
}