Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

list-style-position

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.

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: SphinxKnight, teoli, Nathymig
 Última actualización por: SphinxKnight,