Como você pode personalizar os números em uma lista ordenada?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como posso alinhar os números à esquerda 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.
Solução
Esta é a solução que tenho trabalhando no Firefox 3, Opera e Google Chrome.A lista ainda é exibida no IE7 (mas sem o colchete 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>EDITAR: Correção de múltiplas 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.
Referir-se tipo de estilo de lista Propriedade CSS.Ou, ao usar contadores, o segundo argumento aceita um valor do tipo estilo de lista.Por exemplo, o seguinte usará roman superior:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Outras dicas
O CSS para estilizar listas é 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 esse (observe que eu realmente não tentei):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Você também pode especificar seus próprios números no HTML - por exemplo.se os números estiverem 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 seq O atributo fica visível usando um método semelhante ao fornecido em outras respostas.Mas em vez de usar content: counter(foo), nós usamos content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
Roubei muito disso de outras respostas, mas está funcionando no FF3 para mim.Tem upper-roman, recuo 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>
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 novos navegadores interessantes e exclui a seção (irritantemente grande) do mercado que ainda usa navegadores antigos e ruins,
Algo como o seguinte, que força um fixo nos itens.Sim, eu sei que é menos elegante ter que escolher a largura sozinho, mas usar CSS para o seu layout é como um trabalho policial disfarçado:por melhores que sejam seus motivos, tudo 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.
Os números se alinham melhor se você adicionar zeros iniciais aos números, definindo tipo de estilo de lista para:
ol { list-style-type: decimal-leading-zero; }
Emprestado e melhorado A resposta de Marcus Downing.Testado e funciona no Firefox 3 e Opera 9.Também suporta múltiplas linhas.
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. */
}
Existe o Atributo de tipo 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>
Os documentos dizem sobre list-style-position: outside
O CSS1 não especificou a localização precisa da caixa do marcador e, por razões de compatibilidade, o CSS2 permanece igualmente ambíguo.Para um controle mais preciso das caixas de marcadores, use marcadores.
Mais acima nessa página estão as informações sobre marcadores.
Um exemplo é:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
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;
}
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.
Rápido e sujo solução alternativa.Você pode usar um caractere de tabulação junto com 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 os li tag 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 a 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>
As outras respostas são melhores do ponto de vista conceitual.No entanto, você pode simplesmente preencher os números com o número apropriado de ' ' para alinhá-los.
* Observação:A princípio não reconheci que estava sendo usada uma lista numerada.Achei que a lista estava sendo gerada explicitamente.
Darei aqui o tipo de resposta que geralmente não gosto de ler, mas acho que como existem outras respostas dizendo como conseguir o que você deseja, seria bom repensar se o que você está tentando alcançar é realmente uma boa ideia.
Primeiro você deve pensar se é uma boa ideia mostrar os itens de uma forma fora do padrão, com um caractere separador diferente do fornecido.
Não sei as razões para isso, mas vamos supor que você tenha boas razões.
As formas propostas aqui para conseguir isso consistem em adicionar conteúdo à sua marcação, principalmente através da pseudoclasse CSS :before.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 que o precede não é selecionável.Ou seja, o sistema de numeração padrão parece ser mais uma “decoração” do que conteúdo real.Se você adicionar conteúdo para números usando, por exemplo, os métodos ":before", esse conteúdo será selecionável e, devido a isso, ocorrerão problemas indesejados de copiar/colar ou problemas de acessibilidade com leitores de tela que lerão esse "novo" conteúdo além ao sistema de numeração padrão.
Talvez outra abordagem possa ser estilizar os números usando imagens, embora esta alternativa traga seus próprios problemas (números não mostrados quando as imagens estão desativadas, tamanho do texto para número não mudando, ...).
De qualquer forma, o motivo desta 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.
Este código torna o estilo de numeração igual aos cabeçalhos do 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>
