CSS: controla el espacio entre viñeta y <li>

Me gustaría controlar cuánto espacio horizontal empuja una bala <li>hacia la derecha en un <ol>o <ul>.

Es decir, en lugar de tener siempre

*  Some list text goes
   here.

Me gustaría poder cambiar eso para que sea

*         Some list text goes
          here.

o

*Some list text goes
 here.

Miré a mi alrededor pero solo pude encontrar instrucciones para mover todo el bloque hacia la izquierda o hacia la derecha, por ejemplo, http://www.alistapart.com/articles/taminglists/

Dec 07 '10 10:12 erjiang

Para resumir las otras respuestas aquí, si desea un control más preciso sobre el espacio entre las viñetas y el texto en un <li>elemento de la lista, sus opciones son:

(1) Utilice una imagen de fondo:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Ventajas:

• Puedes usar cualquier imagen que quieras para la viñeta.
• Puedes usar CSS background-positionpara posicionar la imagen prácticamente en cualquier lugar que desees en relación con el texto, usando píxeles, ems o %.

Desventajas:

• Agrega un archivo de imagen adicional (aunque pequeño) a su página, aumentando el peso de la página.
• Si un usuario aumenta el tamaño del texto en su navegador, la viñeta permanecerá en el tamaño original. También es probable que se salga más de su posición a medida que aumenta el tamaño del texto.
• Si está desarrollando un diseño "responsive" utilizando sólo porcentajes para los anchos, podría resultar difícil colocar la viñeta exactamente donde la desea en un rango de anchos de pantalla.

2. Utilice relleno en la <li>etiqueta

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Ventajas:

• Sin imagen = 1 archivo menos para descargar
• Al ajustar el relleno en <li>, puede agregar tanto espacio horizontal adicional como desee entre la viñeta y el texto.
• Si el usuario aumenta el tamaño del texto, el espaciado y el tamaño de las viñetas deben escalar proporcionalmente.

Desventajas:

• No se puede acercar la viñeta al texto más que el valor predeterminado del navegador
• Limitado a formas y tamaños de los tipos de viñetas integrados de CSS.
• La viñeta debe ser del mismo color que el texto.
• Sin control sobre el posicionamiento vertical de la bala.

(3) Envuelva el texto en un <span>elemento adicional

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Ventajas:

• Sin imagen = 1 archivo menos para descargar
• Obtienes más control sobre la posición de la viñeta que con la opción (2): puedes acercarla al texto (aunque a pesar de mis mejores esfuerzos parece que no puedes alterar la posición vertical agregándola padding-topal <span>. Alguien más puede haberlo hecho). aunque hay una solución para esto...)
• La viñeta puede ser de un color diferente al del texto.
• Si el usuario aumenta el tamaño del texto, la viñeta debe escalar en proporción (siempre que establezca el relleno y el margen en ems, no en px).

Desventajas:

• Requiere un elemento extra no semántico (esto probablemente te hará perder más amigos en SO que en la vida real;) pero es molesto para aquellos a quienes les gusta que su código sea lo más sencillo y eficiente posible, y viola la separación de presentación y contenido. que se supone que ofrece HTML/CSS)
• No hay control sobre el tamaño y la forma de la bala.

Esperamos algunas características nuevas de estilo de lista en CSS4, para que podamos crear viñetas más inteligentes sin recurrir a imágenes o etiquetas adicionales :)

Feb 01 '2012 16:02 Joel

Esto debería bastar. Asegúrate de colocar tus balas hacia el exterior. También puedes usar pseudoelementos CSS si puedes soltarlos en IE7 hacia abajo. Realmente no recomiendo usar pseudoelementos para este tipo de cosas, pero funciona para controlar la distancia.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Dec 07 '2010 04:12 Kevin