Horizontal Ordered List (and IE)

Question

I'm looking to generate an output similar to this:

1. One      2. Two      3. Three      4. Four

from the following HTML Code

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ol>

It seems that Internet Explorer does not want to display the number's (list-item's) when you float the li's in order to make them horizontal.

Has anyone run into this and found a solution I can use?

Answer 1

css:

li { display:inline; }

Answer 2

Can you use this CSS?

li  {display: inline}

EDIT: This does not preserve the item numbering, and I'm not aware of any method that does. As a substitute, I guess all you can do is insert the numbers manually, until browsers get better support for CSS counters.

Answer 3

you can't set a width on inline elements. so i usually end up floating them instead

li
{
    float: left;
    width:30px;
}

Answer 4

I've tried every display property on this page and none of them preserve the ordered list numbers when displaying the list horizontally in IE (nor are they preserved in Firefox, Opera or Safari for Windows - and by extension probably Google Chrome, although I admit I didn't test every display property there).

The only solution that (partially - in Firefox only) works is Al W's answer.

I think if you want a horizontal numbered list, you are going to have to generate it on the server or manipulate the list on the client using JavaScript to re-insert the numbers.

Answer 5

I found this page about IE hasLayout useful. It includes discussion of such list formatting (the link points to the lists section of the page)

Answer 6

Okay, you need to add a float, width and list-style-type attribute to the css. Looks like this:

li{
    float:left;
    width:50px;
    list-style-type:decimal;
}

Gushiken

Answer 7

This code works in all browsers that I have tested. If you have not found an answer yet, the suggestion on the most popular answer is valid. Just adjust your width if you want it to wrap.

<ol style="list-style-type:decimal; width: 600px;">
 <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
 <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
 <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{ list-style-type: decimal; width: 600px; }

ol.horizontal li{ float: left; width: 200px; padding: 2px 0px; }

<ol class="horizontal">
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
</ol>