list-style-position

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

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.

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

list-style, list-style-type, list-style-image