109

Como posso alinhar à esquerda os números em uma lista ordenada?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

Alterar o caractere após o número em uma lista ordenada?

1) an item

Também existe uma solução CSS para mudar de números para listas alfabéticas / romanas em vez de usar o atributo type no elemento ol.

Estou mais interessado em respostas que funcionam no Firefox 3.

html css html-lists roman-numerals grom
fonte

98

Esta é a solução que tenho trabalhando no Firefox 3, Opera e Google Chrome. A lista ainda é exibida no IE7 (mas sem o colchete de fechamento e os números de alinhamento à esquerda):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

Expandir trecho

EDITAR: Correção de várias linhas incluída por strager

Também existe uma solução CSS para mudar de números para listas alfabéticas / romanas em vez de usar o atributo type no elemento ol.

Consulte a propriedade CSS do tipo de lista . Ou, ao usar contadores, o segundo argumento aceita um valor do tipo de lista. Por exemplo, o seguinte usará romano superior:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

grom
fonte

Necessário adicionar os números de volta, um estilo global estava removendo-os (quem sabe por que você usaria um ol e removeria os números em vez de um ul ??). Resposta muito clara +1 para explicação e código completos, pode ser facilmente modificado para fazer qualquer coisa.

Morvael

Sugiro um CSS limpo margem / enchimento de solução, que funcione melhor com listas tendo ampla numeração:

ol {counter-reset: item;  padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}

.

mmj

28

O CSS para listas de estilo está aqui , mas é basicamente:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

No entanto, o layout específico que você procura provavelmente só pode ser alcançado investigando as entranhas do layout com algo como isto (observe que eu ainda não tentei):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

Marcus Downing
fonte

1

Isso alinha os números, mas o conteúdo do texto não.

grom

13

Você também pode especificar seus próprios números no HTML - por exemplo, se os números forem fornecidos por um banco de dados:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

Expandir trecho

O seqatributo torna-se visível usando um método semelhante ao fornecido em outras respostas. Mas em vez de usar content: counter(foo), usamos content: attr(seq).

Demonstração em CodePen com mais estilo

z0r
fonte

7

Você pode simplificar isso se apenas usar o valueatributo ativado <li>. por exemplo <li value="20">. Então você não precisa de nenhum pseudoelemento. Demo

GWB

1

@GWB Embora seja válido (e uma boa solução), é limitado a valores numéricos, pois a lista é ordinal. Como tal, você não pode fazer algo assim value="4A", pois não funcionará. Além disso, o atributo de valor pode funcionar com o typeatributo, mas o valor ainda deve ser um número (pois funciona em um conjunto ordenado).

jedd.ahyoung

Obrigado - funcionou para mim quando precisei do Flying Saucer para mostrar uma lista em ordem reversa (o reversedatributo é html5 apenas, como está usando o valuede li). Em vez de usar seu seq, configurei um valuee usei em attr(value)vez deattr(seq)

jaygooby

8

Roubei muito disso de outras respostas, mas isso está funcionando no FF3 para mim. Possui upper-roman, indentação uniforme, um colchete fechado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

Steve Perks
fonte

5

Eu sugiro brincar com o atributo: before e ver o que você pode conseguir com ele. Isso significará que seu código está realmente limitado a bons navegadores novos e exclui a seção (irritantemente grande) do mercado que ainda usa navegadores antigos e ruins,

Algo como o seguinte, o que força uma fixação nos itens. Sim, eu sei que é menos elegante ter que escolher a largura sozinho, mas usar CSS para seu layout é como um trabalho policial disfarçado: por melhores que sejam seus motivos, sempre fica confuso.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

Mas você terá que experimentar para encontrar a solução exata.

Marcus Downing
fonte

você precisará de um contador de reset: item; antes desse bloco.

Greg

5

Os números se alinham melhor se você adicionar zeros à esquerda aos números, definindo o tipo de lista para:

ol { list-style-type: decimal-leading-zero; }

Peter Hilton
fonte

5

HTML5: Use o `value`atributo (sem necessidade de CSS)

Os navegadores modernos interpretarão o valueatributo e o exibirão como você espera. Consulte a documentação do MDN .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

Expandir trecho

Também ter um olhar para o <ol>artigo sobre MDN , especialmente a documentação para o starte atributo.

Flimm
fonte

4

Emprestada e melhorada a resposta de Marcus Downing . Testado e funciona no Firefox 3 e Opera 9. Suporta várias linhas também.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}

strager
fonte

Além disso, você deseja alinhar o texto: esquerda; não está certo. E a última linha deve ficar na margem esquerda: -3,5em;

grom

@grom, Obrigado pela correção em. Além disso, o Opera renderiza listas alinhadas à direita por padrão, então eu imitei esse comportamento.

strager

@grom, o problema do Firefox é ... O Firefox coloca o li: before pseudoelement em sua própria linha sem o float, mesmo se for display: inline-block.

strager

@strager, Bem, estou usando 3.0.4 no Linux e 3.0.3 no Windows e funciona para mim sem o float: left; regra.

grom

@grom, Hmm, interessante. Acabei de testar a mim mesmo e funciona sem o flutuador. Talvez eu tenha digitado incorretamente.

strager

2

Existe o atributo Type que permite alterar o estilo de numeração, no entanto, você não pode alterar o ponto final após o número / letra.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

GateKiller
fonte

A marcação nesta resposta precisa ser corrigida. Use letras minúsculas e coloque os valores dos atributos entre "aspas".

dylanfm

E feche seus elementos: <li> ... </li>.

dylanfm

@dylanfm - Você está ciente de que a marcação apresentada é HTML adequada, 100% válida, sim? Não faça votos negativos para as pessoas por não usarem XHTML, a menos que XHTML seja solicitado.

Ben Blank

Eu não votei contra você. E sim, isso é verdade. HTML. Eu estava apenas sendo uma pessoa exigente e padronizada.

dylanfm

Minhas desculpas por postar html inválido. Copiei o código de um site e não pensei em corrigi-lo. Sinto-me envergonhado agora :(

GateKiller

1

Os documentos dizem sobre list-style-position: outside

CSS1 não especificou a localização precisa da caixa do marcador e por razões de compatibilidade, CSS2 permanece igualmente ambíguo. Para um controle mais preciso das caixas de marcadores, use marcadores.

Mais acima nessa página, estão as coisas sobre marcadores.

Um exemplo é:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

Stephen Denne
fonte

Todos os exemplos (consulte w3.org/TR/CSS2/generate.html#q11 ) para marcadores não funcionam para mim.

grom

1

Não ... basta usar um DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}

William Entriken
fonte

0

Eu tenho. Experimente o seguinte:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

O problema é que isso definitivamente não funcionará em navegadores mais antigos ou menos compatíveis: display: inline-blocké uma propriedade muito nova.

Marcus Downing
fonte

0

Solução alternativa rápida e suja . Você pode usar um caractere de tabulação junto com o texto pré-formatado. Aqui está uma possibilidade:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

e seu html:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

Observe que o espaço entre a litag e o início do texto é um caractere de tabulação (o que você obtém quando pressiona a tecla tab dentro do bloco de notas).

Se precisar de suporte para navegadores mais antigos, você pode fazer o seguinte:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

Marco Luglio
fonte

0

As outras respostas são melhores do ponto de vista conceitual. No entanto, você pode simplesmente digitar os números com o número apropriado de '& ensp;' para alinhá-los.

* Nota: a princípio não reconheci que uma lista numerada estava sendo usada. Achei que a lista estava sendo gerada explicitamente.

Metro
fonte

0

Darei aqui o tipo de resposta que geralmente não gosto de ler, mas acho que, como há outras respostas dizendo como conseguir o que você quer, seria bom repensar se o que você está tentando conseguir é realmente uma boa ideia.

Primeiro, você deve pensar se é uma boa ideia mostrar os itens de uma forma não padronizada, com um caractere separador diferente do fornecido.

Não sei os motivos para isso, mas vamos supor que você tenha bons motivos.

As formas aqui propostas de conseguir que consistam em adicionar conteúdo à sua marcação, principalmente através do CSS: antes da pseudoclasse. Este conteúdo está realmente modificando sua estrutura DOM, adicionando esses itens a ela.

Ao usar a numeração "ol" padrão, você terá um conteúdo renderizado no qual o texto "li" é selecionável, mas o número anterior não é selecionável. Ou seja, o sistema de numeração padrão parece ser mais "decoração" do que conteúdo real. Se você adicionar conteúdo para números usando, por exemplo, aqueles métodos ": before", este conteúdo será selecionável e devido a isso, realizando problemas indesejados de vopy / paste ou problemas de acessibilidade com leitores de tela que lerão este "novo" conteúdo adicional ao sistema de numeração padrão.

Talvez outra abordagem pudesse ser estilizar os números usando imagens, embora essa alternativa traga seus próprios problemas (números não exibidos quando as imagens são desativadas, tamanho do texto para número não muda, ...).

De qualquer forma, a razão dessa resposta não é apenas propor essa alternativa de "imagens", mas fazer as pessoas pensarem nas consequências de tentar mudar o sistema de numeração padrão para listas ordenadas.

Tomasofen
fonte

0

Este código torna o estilo de numeração igual aos cabeçalhos de conteúdo li.

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>

Vlad Alivanov
fonte

Como você pode personalizar os números em uma lista ordenada?

Respostas:

HTML5: Use o `value`atributo (sem necessidade de CSS)

Como você pode personalizar os números em uma lista ordenada?

Respostas:

HTML5: Use o valueatributo (sem necessidade de CSS)

HTML5: Use o `value`atributo (sem necessidade de CSS)