HTML水平有序列表和编号。

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.

li CSS中的display属性似乎是罪魁祸首。

CSS and HTML:

CSS和HTML:

#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;
}

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

1 个解决方案

#1

Instead of displaying them inline, you could float them

您可以将它们浮动，而不是以内联方式显示它们

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

Good luck...

祝你好运…

#1