How can I show numbers on an inline ordered list?

Question

I have a list:

<ol>     <li>Login</li>     <li>Address</li>     <li>Shipping</li> </ol> 

It shows the decimal numbers fine, but when I set the <li> to inline or inline-block, the numbers vanish! I saw other places online mentioned that I have to ensure I have enough margin and padding. and I am sure that I do (10px of each!) Is there some other reason the numbers might be disappearing? I know from firebug that as soon as I uncheck inline they come back.

The CSS is:

ol {   padding: 20px;   list-style-type: decimal; } ol li {   display: inline;   margin: 0 10px;   padding: 0 10px; } 

Answer 1

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; } 

Answer 2

You can try this:

ol  {    /* List will start at 25 + 1 = 26 */    /* Remove the 25 if you want to start at 1 */    counter-reset: LIST-ITEMS 25;  }    li  {    display: inline;    padding-right: 0.5em;  }    li:before  {    content: counter( LIST-ITEMS ) ".";    counter-increment: LIST-ITEMS;    padding-right: 0.25em;    font-style: italic;    font-weight: bold;  }

<ol>    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>    <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>    <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>    <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>    <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>    <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>  </ol>