Today a TabsPlus user asked if it was possible to have the horizontal tabs automatically numbered. Like anyone, I figured it’d be a simple matter of enabling the list-style-type:decimal. Not so! But I did find a “sneaky” solution.
When you change a list to display horizontally (usually with display:inline; or display:inline-block;) the list is no longer itemised. So bullets etc no longer appear.
This though is how TabsPlus displays its horizontal tabs, and how most horizontal navs work.
After playing with different solutions that were all a bit messy, I came up with this one:
#block-NN li.tp-tab-li a:before {
content:" ";
display:list-item;
list-style:decimal inside;
float:left;
padding:0px;
margin-left:20px;
}
where NN is the block ID to apply this to.
You can fiddle with the padding and margins to suit.
You can easily adapt this code to anywhere you want a horizontal numbered list. If you do, it is important though the li tags have display:inline-block set. e.g.:
li {
display:inline-block;
}
If you experiment, you’ll see why!
The image below shows it applied and how it even can be applied to nested blocks in TabsPlus
I hope this helps others, and helps anyone who is looking for a way to make horizontal numbered lists in CSS.