How to create a list of orders in a list of orders?
I need to create an order list in an order list in HTML.
For example:
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
This code doesn't work. How to create this view:
1. Coffee
2. Tea
2-1. Black tea
2-2. Green tea
3. Milk
Thank.
+3
source to share
5 answers
Since you need a custom format for your nested list items, you need to use CSS counters.
ol {
counter-reset: item;
list-style: none;
}
li:before {
counter-increment: item;
content: counter(item)". ";
}
ol ol li:before{
content: counters(item,"-") ". ";
}
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
+4
source to share
HTML doesn't have this style by default. Therefore, we need to use CSS.
OL {
counter-reset: item;
}
LI {
display: block;
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Explanation:
"Counters" to count whether or not.
"Counter-increment" to increment the counter every time a new li is found.
and of course "Counter-reset" to reset this counter every time a new sub-list is found (like ol)
Hope it helps.
+2
source to share
<ol>
<li>Hey</li>
<li>
<ol>
<li>This is</li>
</ol>
</li>
<li>
<ol>
<li>
<ol>
<li>Nested list</li>
</ol>
</li>
</ol>
</li>
</ol>
+1
source to share
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") ". "; counter-increment: item }
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
+1
source to share
You can use element pseudo
for this
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>four</li>
</ol>
+1
source to share