Como manter o recuo da segunda linha nas listas ordenadas via CSS?

260

Eu quero ter uma lista "interna" com marcadores de lista ou números decimais sendo alinhados com blocos de texto superiores. As segundas linhas das entradas da lista precisam ter o mesmo recuo da primeira linha!

Por exemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

O CSS fornece apenas dois valores para sua "posição de estilo de lista" - dentro e fora. Com "dentro", as segundas linhas são alinhadas com os pontos da lista e não com a linha superior:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

A largura "fora" da minha lista não está mais alinhada com os blocos de texto superiores.

As experiências ampliam o recuo do texto, o preenchimento à esquerda e a margem à esquerda para listas desordenadas, mas elas falham nas listas ordenadas porque depende do número de caracteres da lista decimal:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." e "12." não estão alinhados com o bloco de texto superior comparado ao "3". e "4.".

Então, onde está o segredo sobre as listas ordenadas e o recuo da segunda linha? Obrigado pelo seu esforço!

html css html-lists

— kernfrucht
fonte

1

O usuário Pali Madra adicionou isso como resposta, mas foi excluído por não conter mais exlpanação. Ele disse que o jsfiddle pode ser o que você está procurando: jsfiddle.net/palimadra/CZuXY/1

— bfavaretto

Tentar definir padding-left única ...

— matzone

3

Caso alguém se depare com essa pergunta, que está apenas procurando por "recuo básico da lista", dê uma olhada nessa questão ( stackoverflow.com/questions/17556496/… ) e Natasha Banegas responde.

— SunnyRed

Nem uma única resposta aborda a questão real. A questão real é como alinhar à esquerda os dígitos da lista, enquanto alinhar separadamente o texto do item da lista com o texto do item acima, quando esse texto for excedido para uma segunda linha ou linha subsequente. Por padrão - e em quase todas as respostas - os dígitos da lista estão alinhados à direita e o texto dos itens da lista está alinhado à esquerda.

— Jessie Westlake

267

Atualizar

Esta resposta está desatualizada. Você pode fazer isso de maneira muito mais simples, como apontado em outra resposta abaixo:

ul {
  list-style-position: outside;
}

Consulte https://www.w3schools.com/cssref/pr_list-style-position.asp

Resposta original

Estou surpreso ao ver que isso ainda não foi resolvido. Você pode usar o algoritmo de layout de tabela do navegador (sem usar tabelas) como este:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demonstração: http://jsfiddle.net/4rnNK/1/

insira a descrição da imagem aqui

Para fazê-lo funcionar no IE8, use a :beforenotação herdada com dois pontos.

— user123444555621
fonte

2

@Perelli fooé apenas uma seqüência arbitrária (id), que é usado para conectar os counter-reset, counter-incremente counter()propriedades.

— user123444555621

3

Você também pode evitar as coisas da tabela instável usando position: relativeno <li>e position: absoluteno conteúdo gerado. Veja jsfiddle.net/maryisdead/kgr4k para um exemplo.

— Maryisdead

2

@maryisdead Por quê 40px? Isso quebrará quando os contadores forem mais largos que isso . O objetivo de usar o layout da tabela é que o navegador ajustará automaticamente o conteúdo.

— user123444555621

5

Legal, mas como você controla <li> margem inferior? A altura do <li> é determinada exclusivamente pela altura dos elementos das células da tabela. Portanto, margem, preenchimento e altura desses elementos não têm efeito. Como contornar essa limitação?

— Hschmieder

3

Se você possui itens de lista com várias linhas e precisa de espaçamento vertical consistente, a solução é adicionar espaçamento vertical de borda ao seletor de ol, por exemplo, espaçamento de borda: 0 3px; O preenchimento normal na célula da tabela não funciona porque o número é sempre apenas uma linha.

— RemBem

207

Acredito que isso fará o que você está procurando.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

— JTOrlando
fonte

21

melhor se você adicionar também padding-left: 1em;

— Bence Gacsályi 12/08

16

Essa é de longe a melhor resposta de todas as soluções nesta página. É muito mais conveniente que outros. Se você está hesitando com qual resposta escolher, escolha esta.

— Valentin Mercier

25

@loremmonkey Isso é rápido e sujo, mas não é uma solução real. Primeiro, 1emnão é igual ao espaço do travessão. As linhas não se alinham perfeitamente em pixels. Segundo, e quando a lista atingir o número 10? 100? O recuo do texto não funcionará, não será alinhado. Esta resposta deve ser rejeitada.

— 1359 Sunny

1

@ Sunny É uma lista de discos não numerada, então por que contar até 100? Não vejo nenhum problema nas minhas listas usando o código acima.

— Lorem monkey 13/03

2

@loremmonkey O recuo não é 1em. oi60.tinypic.com/a0eyvs.jpg O primeiro item da lista está usando a técnica de recuo do texto acima. Comparado com a aparência normal da posição no estilo da lista: fora dele está desalinhado, neste caso, por um pixel.

— Ensolarado

39

A maneira mais fácil e limpa, sem hacks, é apenas recuar o ul(ou ol), assim:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Isso dá o mesmo resultado que a resposta aceita: https://jsfiddle.net/5wxf2ayu/

Captura de tela:

— Chuck Le Butt
fonte

1

Você pode precisar aplicar list-style-position: outsidepara <li>.

— Alex

@ Alex Você só precisa fazer isso se forçar a substituição de um estilo existente ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).

— Chuck Le Butt

25

Verifique este violino:

http://jsfiddle.net/K6bLp/

Ele mostra como recuar manualmente ul e ol usando CSS.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Também editei seu violino

http://jsfiddle.net/j7MEd/3/

Tome nota disso.

— Deepan Babu
fonte

obrigado, funciona muito bem para a UL e para OL até 9 entradas da lista. Este é o principal problema que descrevi na minha pergunta, a largura de 11/12. No meu exemplo acima, eu executo outra técnica para que o problema pareça diferente, mas o núcleo do problema permaneça o mesmo: Existe uma diferença se meu ponto de lista decimal tiver um ou dois ou mais números - por exemplo, 1., 11. ou 111.! Não vejo nenhum ponto em que seja capaz de reagir via CSS e ajustar o recuo do texto e a margem esquerda para o número numérico.

— Kernfrucht

Para o recuo da segunda linha do ol (mais de um dígito), acho que o CSS não o resolverá. Devemos apenas ir para jquery.

— Deepan Babu

Observe também que o typeatributo para <ol>parece estar obsoleto no HTML 5. Use em style="list-style-type: "vez disso.

— AJ.

2

21 de vocês são mesmo sérios? isso não funciona. Não tenho certeza se você alterou seu código desde que publicou.

— precisa saber é o seguinte

9

Você pode definir a margem e o preenchimento de um olou ulem CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

— luke2012
fonte

infelizmente o problema não é resolvido por esta solução: as segundas linhas estão alinhadas com os pontos da lista não largura da linha superior, veja o exemplo acima

— kernfrucht

11 e 12 em jsfiddle.net/j7MEd/1 alinham-se com os parágrafos superior e inferior e não alterei o código. Estou esquecendo de algo?

— luke2012

não, esse não é o ponto. O principal problema é que a segunda (e terceira, etc ...) linha de cada ponto da lista não possui o mesmo "recuo" da primeira linha! (veja jsfiddle-example). Na minha pergunta acima, penso em uma solução alternativa com preenchimento, margem etc., mas funciona apenas para listas não ordenadas. Na lista ordenada, novos problemas como esse 11/12 ocorrem. Portanto, minha principal pergunta é: como posso fazer o recuo (como apresento no meu primeiro exemplo de consulta) feito para listas ordenadas sem problemas como o 11/12.

— Kernfrucht

Ok desculpe entendi! Essa é uma maneira. O único problema é obter um navegador cruzado. Você precisará definir a margem no IE e o preenchimento no Firefox. jsfiddle.net/j7MEd/2 #

— luke2012 #

7

Eu acredito que você só precisa colocar a lista 'bala' fora do preenchimento.

li {
    list-style-position: outside;
    padding-left: 1em;
}

— Conhecido
fonte

6

Você pode usar CSS para selecionar um intervalo; nesse caso, você deseja listar os itens de 1 a 9:

ol li:nth-child(n+1):nth-child(-n+9)

Em seguida, ajuste as margens desses primeiros itens de maneira apropriada:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Veja em ação aqui: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

— LaFaucon
fonte

5

O seguinte CSS fez o truque:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}

— itoctopus
fonte

4

minha solução é exatamente o mesmo que Pumbaa80 um 's, mas eu sugiro usar display: tableem vez de display:table-rowpara o lielemento. Então será algo assim:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

Então agora podemos usar margens para espaçar entre li's

— Alex
fonte

1

Eu gosto bastante dessa solução:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}

— Corey Ballou
fonte

único tamanho de fonte com problema

— atilkan 30/11

0

As listas ol, ul funcionarão se você quiser, também pode usar uma tabela com border: none no css.

— Casualbot
fonte

eu acho que isso não é uma boa solução, que estabelece regras semânticas

— kernfrucht

0

O CSS fornece apenas dois valores para sua "posição de estilo de lista" - dentro e fora. Com "dentro", as segundas linhas são alinhadas com os pontos da lista e não com a linha superior:

Nas listas ordenadas, sem intervenção, se você der ao "list-style-position" o valor "inside", a segunda linha de um item longo da lista não terá recuo, mas retornará à borda esquerda da lista (ou seja, irá alinhar à esquerda com o número do item). Isso é peculiar às listas ordenadas e não ocorre em listas não ordenadas.

Se, em vez disso, você der ao "list-style-position" o valor "outside", a segunda linha terá o mesmo recuo que a primeira linha.

Eu tinha uma lista com uma borda e tive esse problema. Com "list-style-position" definido como "inside", minha lista não parecia como eu queria. Mas com a "posição do estilo de lista" definida como "fora", os números dos itens da lista ficaram fora da caixa.

Resolvi isso simplesmente definindo uma margem esquerda mais ampla para toda a lista, que empurrou a lista inteira para a direita, de volta à posição em que estava antes.

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

— Chris
fonte

-1

Ok, voltei e descobri algumas coisas. Esta é uma SOLUÇÃO ÁSPERA para o que eu estava propondo, mas parece ser funcional.

Primeiro, fiz dos números uma série de listas não ordenadas. Uma lista não ordenada normalmente terá um disco no início de cada item da lista (

), então você deve definir o CSS como estilo de lista: nenhum;

Então, fiz a lista inteira ser exibida: linha da tabela. Aqui, por que não basta colar o código em vez de tagarelar?

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

CSS:

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

Isso parece alinhar o texto na 2ª div com os números na lista ordenada na primeira div. Cercei a lista e o texto com uma tag, para que eu possa dizer a todos os divs para exibir como blocos embutidos. Isso os alinhava muito bem.

A margem existe para colocar um espaço entre o período e o início do texto. Caso contrário, eles correm um contra o outro e parece uma tristeza.

Meu empregador queria que o texto contornado (para entradas bibliográficas mais longas) fosse alinhado com o início da primeira linha, não com a margem esquerda. Originalmente, eu estava mexendo com uma margem positiva e um recuo de texto negativo, mas então percebi que, quando mudei para dois divs diferentes, isso tinha o efeito de fazer com que o texto ficasse alinhado porque a margem esquerda do div foi a margem em que o texto começou naturalmente. Assim, tudo que eu precisava era de uma margem de 0,2em para adicionar algum espaço, e tudo o mais se alinhava em ordem.

Espero que isso ajude se o OP estivesse com um problema semelhante ... tive dificuldade em entendê-lo.

— David
fonte

-1

Eu tive esse mesmo problema e comecei a usar a resposta do usuário123444555621 . No entanto, eu também precisava adicionar paddinge um bordera cada um li, o que essa solução não permite porque cada lium é um table-row.

Primeiro, usamos a counterpara replicar os olnúmeros do.

Em seguida, definimos display: table;cada um lie display: table-cello :beforepara nos dar o recuo.

Finalmente, a parte complicada. Como não estamos usando um layout de tabela para o todo ol, precisamos garantir que cada um :beforetenha a mesma largura. Podemos usar a chunidade para manter aproximadamente a largura igual ao número de caracteres. Para manter as larguras uniformes quando o número de dígitos para os :beforediferentes, podemos implementar consultas de quantidade . Supondo que você saiba que suas listas não terão 100 itens ou mais, é necessário apenas uma regra de consulta de quantidade :beforepara alterar sua largura, mas você pode adicionar mais facilmente.

ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>

Expandir snippet

— Jacob Alvarez
fonte