Search code examples
cssinternet-explorerlistalignment

Horizontal Ordered List (and IE)

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?

Solution

  • 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>