29

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; }
Improve this question
2
  • Try increasing the margin value and see if it makes any difference Commented Jan 10, 2011 at 5:25
  • Just to be thorough, have you tried more than 10px? Commented Jan 10, 2011 at 5:25

5 Answers 5

Reset to default
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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

That's quite unfair, only float for such a layout
centering dynamic floating content might just be impossible
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.
15

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>

Improve this answer

Comments

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).

Improve this answer

1 Comment

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... :(
3

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

Improve this answer

1 Comment

Now this is brilliant. Thanks for adding it to this Q&A!
0

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.

Improve this answer

1 Comment

This doesn't seems to be working with IE11. All the list-item numbers are 1.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.