Ordenar lista com algarismos romanos usando CSS

Veja como ordenar sua lista com Algarismos Romanos através de CSS.

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

Algarismos Romanos – Minúsculo:

Criando a Lista:

<ul class="romano-minusculo">
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Adicionando o estilo ao seu arquivo CSS:

ul.romano-minusculo {list-style-type:lower-roman;}

Resultado:

  • Item 2
  • Item 2
  • Item 3
  • Item 4

Algarismos Romanos – Maiúsculo:

Criando a Lista:

<ul class="romano-maiusculo">
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Adicionando o estilo ao seu arquivo CSS:

ul.romano-maiusculo {list-style-type:upper-roman;}

Resultado:

  • Item 2
  • Item 2
  • Item 3
  • Item 4


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>