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


177

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/


3
rds

Respostas:


161

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>


Apenas para esclarecer, a tag <span> pode ser semântica quando é atribuída uma classe, por exemplo, <span class = "tel"> 123-456-7890 </span> é implicitamente semântica.
ingyhere

4
+1 para realmente responder à pergunta do cara;) (embora o período deva, idealmente, na vida real ter uma classe de qualquer maneira para boas práticas de prevenção de futuro e semântica: se no futuro qualquer desenvolvimento de javascript ou novos recursos etc. tiver um bom motivo para adicionar extensões adicionais para o seu conteúdo, as coisas poderiam ficar confuso)
user56reinstatemonica8

no firefox não é exibida corretamente texto está sobrepondo as balas usando este truque
Jay Bhalodi

@ingyhere Não duvido que isso seja verdade, pois não consigo encontrar nada que comprove essa afirmação. Você pode fornecer alguma fonte?
8192 WoIIe

@Wolle Hmmm. É um comentário antigo e não tenho certeza da preocupação - se é para saber se <SPAN>pode utilizar idou classmarcar, dê uma olhada no W3C . Se a pergunta é se ela pode transmitir significado semântico, veja esta resposta . Tecnicamente, a <SPAN>tag é um elemento inline não-semântico por si só, mas de alguma forma que oferece mais flexibilidade em sua reutilização. Atualmente, acredito que se possa usar o inline-blockdescritor para permitir uma variedade muito maior de opções de formatação.
ingyhere

120

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 :)


4
Ótima resposta. Para que o número 2 funcione, mantenha sua posição no estilo da lista outside.
Tom Auger

O elemento span é a correção para mim. Eu marquei essa resposta apenas porque preferi margem negativa a posicionamento absoluto negativo - sem uma boa razão.
FlipMcF 27/02

Se você tiver texto que envolve linhas que eu descobri que eu tinha para adicionar display: block;ao elemento span para que o texto envolto iria alinhar bem (eu também acabei usando tags de âncora em vez de vãos)
Kevin M

Usar imagens de fundo para qualquer coisa que não seja apenas quase sempre é uma péssima idéia. Eles não podem ser salvos, não são impressos e não são mencionados pelos leitores de tela. Usar <span> é a maneira mais elegante de resolver isso. os paddings não funcionarão, pois também mudam de posição das balas.
Bachsau 12/03/16

3
Eu nunca usaria imagem de fundo para isso. Você sempre pode usar o elemento: before com o conteúdo: "•"; então, você usa preenchimento e posição absoluta no elemento before para controlá-lo.
Yann Chabot

37

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>


5
Não acredito que essa resposta não seja aceita. É 100% CSS, não adiciona nenhum elemento supérfluo <span>, e finalmente me fez entender por que há uma opção dentro / fora! (e é a resposta aceite da questão duplicado mencionado ...)
MindTailor

1
O uso list-style-position: outsidee preenchimento dos LIelementos permitem aumentar a distância entre os pontos de marcador, mas ainda assim não funciona ao contrário de um deslocamento especificado pelo navegador. Veja este JS Bin .
Mesagoma

4
Adendo: em navegadores modernos (IE9 +, FF, Chrome etc.), use um negativo text-indentno <UL>ou <LI>para negar a distância imposta pelo navegador entre o marcador e o <LI>conteúdo. Ou seja, aumente padding-leftconforme mostrado acima para aumentar a distância e reduza text-indentpara reduzir a distância entre o marcador e o conteúdo, conforme desejado.
Mesagoma 28/08

1
Infelizmente , para todos os navegadores de mesa mencionados acima, se o conteúdo de um <LI>agrupar em uma segunda linha, essas linhas subsequentes acabam sendo recuadas com base na margem / preenchimento / recuo que conseguimos desfazer para a primeira linha via text-indent. Sigh
Mesagoma

outra opção é usar os pseudo-elementos: before e definir o conteúdo como desejar. a partir daí, posicione os pseudo-elementos como desejado.
Kevin

14

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!


3
Resposta agradável e simples. Eu acrescentaria que definição margin-left: -5px(ou qualquer outro valor) irá diminuir o espaço entre o marcador eo <li>elemento
binaryfunt

2
Nota: Isso não suporta recuos pendentes
Eric

Resposta incrível, isso funcionou perfeitamente com a quantidade mínima de trabalho! Obrigado!
precisa saber é o seguinte

12

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


Isso funciona list-style-position: insidetambém, o que é ótimo!
Matt Dodge

11

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


5
Observe que isso só funciona se list-style-positionestiver definido como padrão outside.
agosto

Essa deve ser a resposta aceita, pelo menos para uso normal. Evita o uso de um <span>elemento apenas para fins de design.
eukras

7

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.


Isso se comporta de forma estranha no Chrome. Encaixa em pouco espaço em -5px;
Ian Warburton

7

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.


7

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 :)

2
Eu tentei usar esse método, mas o recuo não funciona para mim se houver quebras de linha. O recuo do texto recuará apenas a primeira linha.
Matt

6

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>

Obrigado pela resposta, tente anotar suas soluções, para facilitar a compreensão dos outros.
Cdomination

esta é a melhor resposta e deve ser aceita. CSS mínimo!
KawaiKx

5

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>

5

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

4

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



0

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.


0

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>

0

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>

insira a descrição da imagem aqui


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.