How To: Make a horizontal numbered list in CSS for TabsPlus

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

horizontal-numbered-list

I hope this helps others, and helps anyone who is looking for a way to make horizontal numbered lists in CSS.

 

About Chris Howard

Chris is a web developer specializing in add-ons for the awesome Headway Themes framework for WordPress. When not coding, he likes to read about pre-history.

Follow