How can I show numbers on an inline ordered list?

css html-lists
Damon picture Damon · Jan 10, 2011 · Viewed 39.4k times · Source

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

Eric Fortis picture Eric Fortis · Jan 10, 2011

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

Related questions

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
How can I center <ul> <li> into div

How can I center an unordered list of <li> into a fixed-width div?

Read More
How to display an unordered list in two columns?

With the following HTML, what is the easiest method to display the list as two columns? <ul> <li>A</li> <li>B</li> <li>C</li> &…

Read More