Para fazer listas numeradas com html básico, usamos as tags ol
e il
. A primeira indica uma lista ordenada e a segunda gera o item da lista propriamente dito.
Se usamos um ambiente ol
dentro de outro, teremos uma lista com sub-tópicos. Assim:
- item 1
- item 2
- subitem 1
- subitem 2
- item 3
O código-fonte para esta lista fica assim:
<ol> | |
<li>item 1</li> | |
<li>item 2 | |
<ol> | |
<li>subitem 1</li> | |
<li>subitem 2</li> | |
</ol></li> | |
<li>item 3</li> | |
</ol> |
Em editores de texto, é comum aplicar numeração de acordo com a numeração do tópico principal. Dessa maneira, a numeração dos subitens ficaria 1.1, 1.2, 1.3 e assim por diante. Depois de alguma pesquisa, encontrei um jeito simples de fazer isso usando apenas CSS. Veja como fica:
- item 1
- item 2
- subitem 1
- subitem 2
- item 3
A compatibilidade de navegadores é ampla. Eu postei essa resposta lá no StackOverflow. Confira o código-fonte (HTML + CSS):
<ol class="nested"> | |
<li class="nested">item 1</li> | |
<li class="nested">item 2 | |
<ol class="nested"> | |
<li class="nested">subitem 1</li> | |
<li class="nested">subitem 2</li> | |
</ol></li> | |
<li class="nested">item 3</li> | |
</ol> |
ol.nested | |
{ | |
counter-reset: item | |
} | |
li.nested | |
{ | |
display: block | |
} | |
li.nested:before | |
{ | |
content: counters(item, ".") ". "; | |
counter-increment: item | |
} |