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?

Scammon

Answer 1

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>

Kosse

Works. As a suggestion, you may want to add this line after the end of the list to prevent the float from messing with other content: <div style="clear: both;"></div> – Leoraleos

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.

Illustrator

This solution drops the ordered list numbers from the elements in IE, Firefox, Opera and Safari. From his question I'm assuming he wants them preserved. – Saberhagen

Good point... I'll see if I can find something and edit it in. – Illustrator

I tried li { display: inline; list-style-type: decimal; } but it had no effect in the listed browsers. – Saberhagen

I tried that too, same results. I also tried messing around with CSS counters, but they don't work properly in FF 3 or at all in IE (7 I think). – Illustrator

i dont think that this is a really nice solution... im not even aware if it works (i didnt test it...). Floating the List Entries easier and u still have the option to hide specific elements with display:none;. The Numbers can be prepended with list-style-type:decimal; – Affinity

Answer 3

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.

Saberhagen

Which version of Firefox hides the numbers for you? I see them fine in FF3.0. Whether that's a bug or not is debatable. – Runofthemill

@Bobby What I was saying is that the ordered list numbers are not preserved when you use li { display:inline; }. They are preserved in Firefox when you use li { float:left; width:30px; } (as per Al W's answer). – Saberhagen

Answer 4

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

Affinity

Answer 5

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

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

Allergic

This solution drops the ordered list numbers from the elements in IE6, 7 & 8RC1, Google Chrome and Safari for Windows 3.2.2. It preserves the ordered list numbers in Firefox 2, 3 and 3.1b2. From his question I'm assuming he wants them preserved. – Saberhagen

Answer 6

css:

li { display:inline; }

Classis

This solution drops the ordered list numbers from the elements in IE, Firefox, Opera and Safari. From his question I'm assuming he wants them preserved. – Saberhagen

Answer 7

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)

Instantly

Answer 8

EDIT: A much more reliable solution would be to use flex-box which can accommodate longer items better.

.items {
  display: flex;
}

.items > li {
  flex: 1;
}

<ol class="items">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

ORIGINAL ANSWER:

This is pretty late but if you know the number of items beforehand, and if the items are short and would not span multiple lines, you can use the css property column-count which is now supported in all modern browsers.

.items {
  column-count: 4;
}

<ol class="items">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

Geoffreygeoffry

Answer 9

I did it this way:

ol {
  display: flex;
  flex-direction: row; // this is the default for flex-direction but this demonstrates that row sets the items in a horizontal layout which is what you want
  flex-wrap: wrap; // if you want to wrap the list onto the next line
  // gap: 3rem; // an alternative to the margin in the <li> element
  list-style-type: decimal; // set the type of numbers to display, in this case decimals
  list-style-position: inside; // set bullets to display inside the list so that they don't overlay each list item
}

li {
  margin-right: 3rem; // set some margin if you want some spacing between list-elements alternately you can set the gap in the <ol> element to do the same thing without having to create styles that deal with the margin for the last <li> child
  width: 12.5rem; // if you want to have a fixed width for each element
}

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

Chrystel