CSS: espacio de control entre viñeta y

Solución:

Pon su contenido en un span que está relativamente posicionado, entonces puede controlar el espacio por el left propiedad de la span.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

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-position para colocar la imagen prácticamente en cualquier lugar que desee en relación con el texto, utilizando píxeles, ems o%

Desventajas:

• Agrega un archivo de imagen adicional (aunque pequeño) a su página, lo que aumenta 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 de su posición a medida que aumenta el tamaño del texto.
• Si está desarrollando un diseño ‘receptivo’ utilizando solo porcentajes para los anchos, podría ser difícil obtener la viñeta exactamente donde lo desea en un rango de anchos de pantalla

2. Utilice acolchado en el <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
• Ajustando el acolchado en el <li>, puedes agregar tanto extra espacio horizontal entre la viñeta y el texto como desee
• 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 mover la viñeta más cerca del texto que el predeterminado del navegador
• Limitado a las formas y tamaños de los tipos de viñetas incorporados 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 extra <span> elemento

<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 moverla más cerca del texto (aunque a pesar de mis mejores esfuerzos, parece que no puedes alterar la posición vertical agregando padding-top al <span>. Sin embargo, alguien más puede tener una solución para esto …)
• La viñeta puede ser de un color diferente al del texto.
• Si el usuario aumenta el tamaño de su 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 le 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)
• Sin 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 marcas externas 🙂

Esto debería hacerlo. Asegúrese de colocar sus balas hacia el exterior. también puede usar pseudo elementos CSS si puede colocarlos en IE7 hacia abajo. Realmente no recomiendo usar pseudo elementos 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>

---

---

Utiliza Nuestro Buscador