--- title: list-style-position slug: Web/CSS/list-style-position tags: - CSS - 'CSS:Referencias' - Referencia_CSS - Todas_las_Categorías translation_of: Web/CSS/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.

{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }}
Se aplica a: elementos con 'display: list-item'
{{ Cssxref("inheritance", "Valor heredado") }}: Sí
Porcentajes: n/a
Medio: {{ Cssxref("Media:Visual", "visual") }}
{{ Cssxref("computed value", "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;
}

Result

Especificaciones

Compatibilidad con navegadores

Ver también

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}

{{ languages( { "fr": "fr/CSS/list-style-position", "pl": "pl/CSS/list-style-position", "en": "en/CSS/list-style-position" } ) }}