HTML Horizontal Ordered Lists with Numbering

Question

I'm using an ordered list in order to get numbering, which works perfectly fine when the list is vertical. However, once I make it horizontal, the numbering disappears.

The display attribute in the li CSS seems to be the culprit.

HTML:

<div id="QuickSteps">
    <h2>5 Quick Steps</h2>
    <ol>
        <li class="selected">Account Info ></li>
        <li>About Me ></li>
        <li>Preferences ></li>
        <li>Habits ></li>
        <li>Your Avatar</li>
    </ol>
</div>

CSS: #QuickSteps { width:723px; height:75px; border:solid 2px #b9c7d9; background-color:#e5ecf2; }

#QuickSteps h2{
 padding-top:2px;
 padding-left:7px;
}

#QuickSteps ol{
 color:#003366;
}

#QuickSteps li {
 display:inline;
}

#QuickSteps li.selected{
 font-weight:bold;
}

Answer 1

Instead of displaying them inline, you could float them

#QuickSteps li {
  float:left;
  margin-left:50px;
}

Good luck...