How to Show Numbers on an Inline Ordered List

How can I show numbers on an inline ordered list?

I don't know why this happens, but it can be solved by floating left instead of display: inline

See https://jsfiddle.net/CMKzK/

ol {
    padding: 20px; 
    list-style-type: decimal;

}
ol li {
    float: left;
    margin: 0 10px;
    padding: 0 10px;
}

Numbers not showing with list items in ordered list with display: inline-block; and text-overflow: ellipsis;

Here is a trick solving the lost number issue

Side notes:

A li is displayed as a list-item and when altered to inline-block the list style disappears
CSS counters could be another approach

ol li {  float: left;  width: 200px;  margin-right: 30px;}ol li a {  display: inline-block;  vertical-align: top;  width: 100%;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

<ol> <li><a href="One">Link One One One One One One One One</a></li> <li><a href="Two">Link Two Two Two Two Two Two Two Two</a></li> <li><a href="Three">Link Three Three Three Three Three Three</a></li> <li><a href="Four">Link Four Four Four Four Four Four Four</a></li> <li><a href="Five">Link Five Five Five Five Five Five Five Five</a></li> <li><a href="Six">Link Six Six Six Six Six Six Six Six Six Six</a></li> <li><a href="Seven">Link Seven Seven Seven Seven Seven Seven Seven</a></li> <li><a href="Eight">Link Eight Eight Eight Eight Eight Eight Eight Eight</a></li> <li><a href="Nine">Link Nine Nine Nine Nine Nine Nine Nine Nine</a></li> <li><a href="Ten">Link Ten Ten Ten Ten Ten Ten Ten Ten Ten Ten</a></li></ol>

Ordered List (ol) showing up un-numbered?

It's going to be a CSS issue. CSS can change the numbering/bullet style, and even turn it off altogether. Using Firebug, inspect the element and look at the CSS styles on the right to see what styles are being applied to it. Look for one called list-style.

Horizontal ordered list

When you are using anything other than list-item in your display property, the numbering goes off, but you can use counter to get it back.

ol {  margin: 0;  padding: 0;  counter-reset: list-c;}ol li {  display: inline-block;  counter-increment: list-c;  padding-left: 25px;  position: relative;}ol li:before {  content: counter(list-c) '.';  display: inline-block;  text-align: center;  position: absolute;  left: 10px;}

<ol>  <li>Example</li>  <li>Example</li>  <li>Example</li></ol>

Styling numbers of outside ordered list

Firstly, it's not list-position-style it's list-style-position. Anyway, just list-style: none; it so that to hide the numbers, then apply position: relative; to li and position: absolute; to its :before. Just take a look on what I have done below:

ol {   list-style: none;   counter-reset: item; } li {   counter-increment: item;   margin-bottom: 5px;    position: relative; } li:before {   margin-right: 10px;   content: counter(item);   background: lightblue;   border-radius: 100%;   color: white;   width: 1.2em;   text-align: center;   display: inline-block;   position: absolute;   left: -25px; }

<ol>   <li><span>blah blah blah.</span>   <ol type="a" class="ol substeps">   <li>blah blah</li>     <li>blah</li>     </ol></li>  <li>blah blah blah blah</li></ol>

How can you customize the numbers in an ordered list?

This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):

ol {  counter-reset: item;  margin-left: 0;  padding-left: 0;}li {  display: block;  margin-bottom: .5em;  margin-left: 2em;}li::before {  display: inline-block;  content: counter(item) ") ";  counter-increment: item;  width: 2em;  margin-left: -2em;}

<ol>  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li>  <li>Five</li>  <li>Six</li>  <li>Seven</li>  <li>Eight</li>  <li>Nine<br>Items</li>  <li>Ten<br>Items</li></ol>

Can you style ordered list numbers?

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {   list-style: none;   counter-reset: item; } li {   counter-increment: item;   margin-bottom: 5px; } li:before {   margin-right: 10px;   content: counter(item);   background: lightblue;   border-radius: 100%;   color: white;   width: 1.2em;   text-align: center;   display: inline-block; }

<ol>  <li>item</li>  <li>item</li>  <li>item</li>  <li>item</li></ol>

Horizontal Ordered List (and IE)

This code works in all browsers that I have tested. If you have not found an answer yet, the suggestion on the most popular answer is valid. Just adjust your width if you want it to wrap.

<ol style="list-style-type:decimal; width: 600px;">
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{
    list-style-type: decimal;
    width: 600px;
}

ol.horizontal li{
    float: left;
    width: 200px;
    padding: 2px 0px;
}

<ol class="horizontal">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>