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

votos
90

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 alterar a partir de números de listas alfabéticos / romanas, em vez de usar o atributo type no elemento ol.

Estou mais interessado nas respostas que funcionam no Firefox 3.

Publicado 14/08/2008 em 09:42
fonte usuário
Em outras línguas...                            


17 respostas

votos
26

O CSS para listas de styling é aqui , mas é basicamente:

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

No entanto, o layout específico que você está depois pode provavelmente somente ser alcançado por investigar as entranhas do layout com algo parecido com este (observe que eu não tenha realmente tentou fazê-lo):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Respondeu 14/08/2008 em 10:01
fonte usuário

votos
2

Não é o atributo Tipo que lhe permite mudar o estilo de numeração, no entanto, você não pode mudar o ponto final depois do número / letra.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
Respondeu 14/08/2008 em 10:03
fonte usuário

votos
5

Sugiro brincar com o: antes atributo e ver o que você pode alcançar com ele. Isso vai significar o seu código realmente está limitada a agradáveis ​​novos navegadores, e exclui a seção (irritantemente grande) do mercado ainda está usando lixo navegadores antigos,

Algo como o seguinte, o que obriga um fixo com sobre os itens. Sim, eu sei que é menos elegante de ter de escolher a largura mesmo, mas usando CSS para o seu layout é como trabalho policial disfarçado: por melhor seus motivos, ele sempre fica confuso.

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

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

Respondeu 18/08/2008 em 13:51
fonte usuário

votos
5

Os números se alinham melhor se você adicionar líder de zeros aos números, definindo list-style-type para:

ol { list-style-type: decimal-leading-zero; }
Respondeu 24/08/2008 em 09:30
fonte usuário

votos
32

Penso que esta é uma resposta que satisfaça suas necessidades:

li { 
  list-style-position: inside;
  margin-bottom: .5em;
}
li span {
  float: left;
  margin-left: 2em;
  margin-top: -1.25em;
}
<ol start="8">
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
</ol>

Respondeu 28/01/2009 em 03:54
fonte usuário

votos
86

Esta é a solução que eu trabalho no Firefox 3, Opera e Google Chrome. A lista ainda exibe no IE7 (mas sem a estreita suporte e números alinhar à 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>

EDIT: Incluído correção de várias linhas por strager

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

Consulte list-style-type propriedade CSS. Ou quando utilizar contadores o segundo argumento aceita um valor list-style-type. Por exemplo, o seguinte irá utilizar roman superior:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
Respondeu 28/01/2009 em 05:31
fonte usuário

votos
1

Os documentos dizem respeito list-style-position: outside

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

Mais acima essa página é o material sobre marcadores.

Um exemplo é:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
Respondeu 28/01/2009 em 05:53
fonte usuário

votos
0

Eu tenho. Tente 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 este definitivamente não irá funcionar em navegadores mais antigos ou menos compatíveis: display: inline-blocké uma nova propriedade.

Respondeu 28/01/2009 em 13:49
fonte usuário

votos
8

Roubou um monte de presente de outras respostas, mas este está trabalhando no FF3 para mim. Tem upper-roman, recuo uniforme, uma suporte de perto.

<!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>
Respondeu 28/01/2009 em 14:54
fonte usuário

votos
4

Emprestado e melhorou 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. */
}
Respondeu 28/01/2009 em 19:01
fonte usuário

votos
0

Rápido e sujeira solução alternativa. 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>

Note-se que o espaço entre a litag eo início do texto é um personagem tabulação (o que você começa quando você pressiona a tecla TAB dentro do bloco de notas).

Se você precisa para apoiar os navegadores mais antigos, você pode fazer isso em vez disso:

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

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
Respondeu 01/02/2009 em 16:02
fonte usuário

votos
1

Nope ... apenas usar uma 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;
}
Respondeu 22/11/2011 em 21:45
fonte usuário

votos
0

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

* Nota: Eu não à primeira reconhecer que uma lista numerada estava sendo utilizado. Eu pensei que a lista foi sendo gerado explicitamente.

Respondeu 28/11/2011 em 00:44
fonte usuário

votos
0

Vou dar aqui o tipo de resposta que eu geralmente não gostam de ler, mas eu acho que, como há outras respostas dizendo-lhe como achive o que você quer, que poderia ser bom para repensar se o que você está tentando alcançar é realmente uma boa ideia.

Primeiro, você deve pensar se é uma boa idéia para mostrar os itens de uma forma não-padrão, com um diferent separador charater do que o fornecido.

Não sei as razões para isso, mas vamos supor que você tem boas razões.

As formas propossed aqui para achive que consistem no conteúdo add a sua marcação, através principalmente da CSS: antes pseudoclass. Este conteúdo é realmente modifing sua estrutura DOM, adicionando os itens a ele.

Quando você usa o padrão "ol" numeração, você terá um conteúdo renderizado em que 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 o conteúdo real. Se você adicionar conteúdo para números, utilizando por exemplo, aqueles ": antes de" métodos, esse conteúdo será selecionável, e dued a esta, realizando problemas indesejáveis ​​vopy / colar, ou questões de Acessibilidade com leitores de tela que irão ler esta "nova" conteúdo, além para o sistema de numeração padrão.

Talvez uma outra abordagem poderia ser o estilo dos números usando imagens, embora esta alternativa vai trazer seus próprios problemas (números não mostrados quando as imagens são desativados, tamanho de texto para o número não mudar, ...).

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

Respondeu 08/02/2014 em 15:10
fonte usuário

votos
7

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

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

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

ol {
  list-style: none;
}

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

Demo em CodePen com mais estilo

Respondeu 05/08/2015 em 03:53
fonte usuário

votos
0

Este código faz numeração estilo mesmo que 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>
Respondeu 27/03/2017 em 13:52
fonte usuário

votos
0

HTML5: Use o valueatributo (sem CSS necessário)

Navegadores modernos irá interpretar o valueatributo e irá exibi-lo como você espera. Consulte a documentação 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>

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

Respondeu 06/02/2020 em 18:40
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more