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.

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

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;
}

Result

Especificaciones

Compatibilidad con navegadores

Ver también