How can I show numbers on an inline ordered list?
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;
}
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).
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>