CSS: controle de espaço entre marcador e <li>

Eu gostaria de controlar quanto espaço horizontal uma bala empurra <li>para a direita em um <ol>ou <ul>.

Ou seja, em vez de sempre ter

*  Some list text goes
   here.

Eu gostaria de poder mudar isso para ser

*         Some list text goes
          here.

ou

*Some list text goes
 here.

Olhei em volta, mas só consegui encontrar instruções para mudar todo o bloco para a esquerda ou direita, por exemplo, http://www.alistapart.com/articles/taminglists/

Coloque seu conteúdo em um local spanrelativamente posicionado, para que você possa controlar o espaço pela leftpropriedade de 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 as outras respostas aqui - se você deseja um controle mais refinado do espaço entre os marcadores e o texto em um <li>item da lista, suas opções são:

(1) Use uma imagem de plano de fundo:

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

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

Vantagens:

• Você pode usar qualquer imagem que desejar para o marcador
• Você pode usar CSS background-positionpara posicionar a imagem praticamente em qualquer lugar que desejar em relação ao texto, usando pixels, ems ou%

Desvantagens:

• Adiciona um arquivo de imagem extra (embora pequeno) à sua página, aumentando o peso da página
• Se um usuário aumentar o tamanho do texto no navegador, o marcador permanecerá no tamanho original. Também ficará mais fora de posição à medida que o tamanho do texto aumenta
• Se você estiver desenvolvendo um layout 'responsivo' usando apenas porcentagens para larguras, pode ser difícil colocar o marcador exatamente onde você deseja em um intervalo de larguras de tela

2. Use preenchimento na <li>etiqueta

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

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

Vantagens:

• Sem imagem = menos 1 arquivo para download
• Ao ajustar o preenchimento no <li>, você pode adicionar o espaço horizontal extra entre o marcador e o texto que desejar
• Se o usuário aumentar o tamanho do texto, o espaçamento e o tamanho do marcador deverão ser reduzidos proporcionalmente

Desvantagens:

• Não é possível mover o marcador mais para perto do texto do que o padrão do navegador
• Limitado a formas e tamanhos dos tipos de marcadores internos do CSS
• O marcador deve ter a mesma cor do texto
• Sem controle sobre o posicionamento vertical da bala

(3) Coloque o texto em um <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>

Vantagens:

• Sem imagem = menos 1 arquivo para download
• Você obtém mais controle sobre a posição do marcador do que com a opção (2) - você pode movê-lo para mais perto do texto (embora, apesar dos meus esforços, pareça que você não pode alterar a posição vertical adicionando padding-topao<span> . uma solução alternativa para isso, no entanto ...)
• O marcador pode ter uma cor diferente do texto
• Se o usuário aumentar o tamanho do texto, o marcador deverá ser dimensionado em proporção (desde que você defina o preenchimento e a margem em ems, não px)

Desvantagens:

• Requer um elemento extra-semântico (provavelmente perderá mais amigos no SO do que na vida real;), mas é irritante para quem gosta do código ser o mais enxuto e eficiente possível e viola a separação de apresentação e conteúdo que HTML / CSS deve oferecer)
• Sem controle sobre o tamanho e a forma da bala

Esperamos por alguns novos recursos no estilo de lista no CSS4, para que possamos criar marcadores mais inteligentes sem recorrer a imagens ou marcação exta :)

Isso deve servir. Certifique-se de definir suas balas para o exterior. você também pode usar pseudo-elementos CSS se puder descartá-los no IE7 para baixo. Eu realmente não recomendo usar pseudo-elementos para esse tipo de coisa, mas funciona para controlar a distância.

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>

Pergunta antiga, mas o pseudo-elemento: before funciona bem aqui.

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

Funciona muito bem e não requer muitas regras extras ou html.

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

Felicidades!

Para o estilo de lista: inline :

É quase o mesmo que a resposta do DSMann8, mas com menos código css.

Você só precisa

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

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

Felicidades

Você pode usar o padding-leftatributo nos itens da lista ( não na própria lista!).

Usar indentação de texto em li funciona melhor.

recuo do texto: -x px; aproximará a bala de li e vice-versa.

Usando o relativo no intervalo, a esquerda negativa pode não funcionar corretamente com versões mais antigas do IE. PS - evite dar posições o máximo que puder.

Aqui está outra solução usando o contador css e os pseudo elementos. Acho mais elegante, pois não requer o uso de marcação html extra nem classes 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
}

Uso espaços não quebráveis ​​para que o espaçamento afete apenas a primeira linha dos elementos da minha lista (se o elemento da lista tiver mais de uma linha). Você pode usar o preenchimento aqui.

Pergunta antiga, mas ainda relevante. Eu recomendo usar negativo text-indent. list-style-positiondevemos seroutside .

Prós:

• O marcador está corretamente posicionado automaticamente
• Alterar o tamanho da fonte não quebra a posição do marcador
• Nenhum elemento extra (nenhum :: pseudoelementos também)
• Funciona para RTL e LTR sem alteração no CSS.

Contras:

• experimentar
• para
• encontrar
• 1 :)

Uma lista não ordenada começa com a tag ul. Cada item da lista começa com o item Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão:

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

Resultado:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

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

</body>
</html>

A propriedade recuo do texto especifica o recuo da primeira linha em um bloco de texto.
Nota: Valores negativos são permitidos. A primeira linha será recuada para a esquerda se o valor for negativo.

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

Parece que você pode (um pouco) controlar o espaçamento usando preenchimento na tag <li>.

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

O problema é que ele não parece permitir que você se apresse, como no exemplo final.

Para isso, você pode tentar desativar o estilo de lista e usar o & bull;

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

Parece haver uma solução muito mais limpa se você deseja reduzir apenas o espaçamento entre o marcador e o texto:

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

Você também pode usar uma substituição de imagem de plano de fundo como alternativa, oferecendo controle total sobre o posicionamento vertical e horizontal.

Veja a resposta a esta pergunta

ul
{
list-style-position:inside;
} 

Definição e Uso

A propriedade list-style-position especifica se os marcadores de item de lista devem aparecer dentro ou fora do fluxo de conteúdo.

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

Você pode usar ul li:beforee uma imagem de fundo, e atribuir position: relativee position:absoluteao lie li:before, respectivamente. Dessa forma, você pode criar uma imagem e posicioná-la onde quiser em relação ao li.

Use padding-left:1em; text-indent:-1empara a <li>tag.
Então, list-style-position: insidepara a <ul>tag.

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

A solução a seguir funciona bem quando você deseja mover o texto para mais perto do marcador e mesmo se você tiver várias linhas de texto.

margin-right permite que você mova o texto para mais perto do marcador

text-indent garante que várias linhas de texto ainda estejam alinhadas corretamente

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>

use <span style="display: flex;">dentro de cada um <li>.