Ordenar lista com números usando CSS

Veja como ordenar sua lista com números através de CSS.

Usaremos a tag list-style-type para fazer as mudanças.

Números – Padrão:

Criando a Lista:

<ul class="numero">
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Adicionando o estilo ao seu arquivo CSS:

ul.numero {list-style-type:decimal;}

Resultado:

  • Item 2
  • Item 2
  • Item 3

Número – Com “0” na frente:

Criando a Lista:

<ul class="numero-zero">
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Adicionando o estilo ao seu arquivo CSS:

ul.numero-zero {list-style-type:decimal-leading-zero;}

Resultado:

  • Item 2
  • Item 2
  • Item 3


Você também pode personalizar suas listas de outras formas: Veja Como


Deixe sua Pergunta ou Comentário:

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Por favor, digite os caracteres desta imagem na caixa de entrada

Por favor digite o código da imagem

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>