CSS: espacio de control 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 ser

*         Some list text goes
          here.

o

*Some list text goes
 here.

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

Coloque su contenido en un lugar spanrelativamente posicionado, luego puede controlar el espacio por la leftpropiedad del 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 viñetas y el texto en un <li>elemento de la lista, sus opciones son:

(1) Use 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
• Puede usar CSS background-positionpara 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, aumentando el peso de la página
• Si un usuario aumenta el tamaño del texto en su navegador, la viñeta se mantendrá 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 anchos, podría ser difícil obtener la viñeta exactamente donde lo desea en un rango de anchos de pantalla

2. Use 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 el <li>, puede agregar tanto espacio horizontal adicional 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 la viñeta deberían escalarse proporcionalmente

Desventajas

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

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

<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
• Se obtiene un mayor control sobre la posición de la bala que con la opción (2) - se puede mover más cerca del texto (aunque a pesar de mis mejores esfuerzos, parece que no se puede alterar la posición vertical mediante la adición padding-topa la<span> . Alguien más puede tener una solución para esto, sin embargo ...)
• La viñeta puede tener un color diferente al del texto.
• Si el usuario aumenta su tamaño de texto, la viñeta debería escalar en proporción (siempre que configure el margen y el margen en ems, no px)

Desventajas

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

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

Esto debería hacerlo. Asegúrese de colocar sus balas en el exterior. También puede usar pseudo elementos CSS si puede soltarlos 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>

Antigua pregunta, pero el: antes del pseudo elemento funciona bien aquí.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Funciona muy bien y no requiere muchas reglas adicionales o html.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

¡Salud!

Para list-style-type: en línea :

Es casi lo mismo que la respuesta de DSMann8 pero menos código CSS.

Solo necesitas

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Salud

Puede usar el padding-leftatributo en los elementos de la lista (¡ no en la lista misma!).

Usar sangría de texto en li funciona mejor.

sangría de texto: -x px; moverá la bala más cerca de li y viceversa.

El uso de relativo en el intervalo de la izquierda negativa podría no funcionar correctamente con versiones anteriores para IE. PD: evita dar posiciones tanto como puedas.

Aquí hay otra solución usando css counter y pseudo elementos. Me parece más elegante, ya que no requiere el uso de marcado html adicional ni clases de CSS:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Utilizo espacios no rompibles para que el espaciado solo afecte a la primera línea de los elementos de mi lista (si el elemento de la lista tiene más de una línea de largo). Puedes usar relleno aquí en su lugar.

Antigua pregunta pero aún relevante. Recomiendo usar negativo text-indent. list-style-positiondebe ser outside.

Pros:

• La bala se posiciona correctamente de forma automática
• Cambiar el tamaño de fuente no rompe la posición de la viñeta
• Sin elementos adicionales (no :: pseudo-elementos también)
• Funciona tanto para RTL como para LTR sin cambios en CSS.

Contras:

• tratar
• a
• encontrar
• uno :)

Una lista desordenada comienza con la etiqueta ul. Cada elemento de la lista comienza con Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Salida:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

La propiedad de sangría de texto especifica la sangría de la primera línea en un bloque de texto.
Nota: Se permiten valores negativos. La primera línea se sangrará a la izquierda si el valor es negativo.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Parece que puede (de alguna manera) controlar el espaciado utilizando relleno en la etiqueta <li>.

<style type="text/css">
    li { padding-left: 10px; }
</style>

El problema es que no parece permitirte arrugarlo como tu ejemplo final.

Para eso, puede intentar desactivar list-style-type y usar & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Parece que hay una solución mucho más limpia si solo desea reducir el espacio entre la viñeta y el texto:

li:before {
    content: "";
    margin-left: -0.5rem;
}

También puede utilizar un reemplazo de imagen de fondo como alternativa, que le brinda un control total sobre el posicionamiento vertical y horizontal.

Ver la respuesta a esta pregunta

ul
{
list-style-position:inside;
} 

Definición y uso

La propiedad de posición de estilo de lista especifica si los marcadores de elementos de lista deben aparecer dentro o fuera del flujo de contenido.

Fuente: http://www.w3schools.com/cssref/pr_list-style-position.asp

Puede usar ul li:beforey una imagen de fondo, y asignar position: relativey position:absolutea liy li:before, respectivamente. De esta manera, puede crear una imagen y colocarla donde desee en relación con el li.

Úselo padding-left:1em; text-indent:-1empara la <li>etiqueta.
Entonces, list-style-position: insidepara la <ul>etiqueta.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

La siguiente solución funciona bien cuando desea mover el texto más cerca de la viñeta e incluso si tiene varias líneas de texto.

margin-right le permite mover el texto más cerca de la viñeta

text-indent asegura que varias líneas de texto aún se alineen correctamente

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

usar <span style="display: flex;">dentro de cada uno <li>.