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

Try increasing the margin value and see if it makes any difference — programmer, Jan 10 '11 at 05:25

score 22 · Accepted Answer · edited Jun 10 '18 at 23:14

22

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

edited Jun 10 '18 at 23:14

Eric

6,563
5
42
66

answered Jan 10 '11 at 05:29

Eric Fortis

16,372
6
41
62

2

That's quite unfair, only float for such a layout – baldrs Feb 27 '14 at 09:51
centering dynamic floating content might just be impossible – Muhammad Umer Sep 11 '14 at 04:00
This isn't a real solution: when one of the li is long enough to start wrapping, the entire thing reverts back to the traditional list. A counter is needed with inline displayed li. – Jiulin Teng Oct 29 '20 at 17:17

score 15 · Answer 2 · edited Jun 10 '18 at 23:35

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>

score 6 · Answer 3 · answered Jan 10 '11 at 05:41

6

If you don't care about old versions of IE, you can use automatic counters and numbering

Otherwise you should specify the numbers manually (@Babiker's solution), or float your li's (@Eric Fortis' solution).

answered Jan 10 '11 at 05:41

zzzzBov

174,988
54
320
367

2

This is awesome... Way better than floats! I can't believe how long I've been a front-end dev and didn't know about this... :( – chrisfrancis27 Apr 24 '14 at 14:53

score 2 · Answer 4 · answered Sep 28 '21 at 21:58

2

Modern Approach - Use Flexbox

ol {
  display: flex;
  flex-wrap: wrap;
}

ol li {
  margin: 0 20px;
}

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

More info on Flexbox here

answered Sep 28 '21 at 21:58

Nathan

313
2
4

2

Now *this* is brilliant. Thanks for adding it to this Q&A! – Dɑvïd Nov 22 '22 at 12:32

score 0 · Answer 5 · answered Aug 29 '12 at 19:52

I've gotten around the problem of ol numbers getting pushed around by left-floating elements with the following:

li {
    overflow:hidden;
    list-style-position: inside;
    display:block;
}
.number {
    display:list-item;
    position:absolute;
}
.first-item {
    float:left; 
    /* revise margin to your needs */       
    margin-left:35px;
}
.second-item {
    float:left;
}

given the following DOM:

<ol id="playlist">

        <li>
            <div class="number"></div>
            <a class="first-item" href="#">click here</a>
            <div class="second-item">some detail</div>
        </li>
</ol>

seems to work with inline-block elements as well.

This doesn't seems to be working with IE11. All the list-item numbers are 1. — Tom, May 03 '16 at 15:16

How can I show numbers on an inline ordered list?

5 Answers5

Modern Approach - Use Flexbox

Linked