logo标签列表

带编号的HTML水平有序列表

htmlcsshtml-listshorizontallist
4

我正在使用有序列表来获取编号，在列表垂直时效果非常好。但是，一旦我将其横向排列，编号就会消失。

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

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
驯服列表：http://www.alistapart.com/articles/taminglists/ - OMG Ponies
1个回答
6

你可以将它们浮动而非内联显示

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

祝你好运...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接