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 upAlterar o caractere após o número em uma lista ordenada?
1) an itemTambé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.
Respostas:
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>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;
/* ... */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;}.
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 }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>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).
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).
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)
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>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.
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; }valueatributo (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>Também ter um olhar para o <ol>artigo sobre MDN , especialmente a documentação para o starte atributo.
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. */
}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>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;
}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.
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>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.
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.
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>