How can I show numbers on an inline ordered list?

Issue

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

Solution

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

Answered By – Eric Fortis

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0