Question

希望这是一个我想念的简单的东西，我有一个包含一组LI链接的OL。在Chrome和Firefox中，这非常有效，在IE8中，它们显示为在页面垂直向下移动的编号列表。

HTML：

<div class="header">
    <img src="images/header.png" alt="Logo">
    <ol>
    <li><a href="index.html">Home</a></li>
    <li><a href="page2.html">page2</a></li>
    <li><a href="page3.html">page3</a></li>
    <li><a href="page4.html">page4</a></li>
    <li><a href="page5.html">page5</a></li>
    <li><a href="page6.html">page6</a></li>
    <li><a href="page7.html">page7</a></li>
    </ol>
</div>

CSS;

.header {
   width:888px;
   height:119px;
   margin: 0 auto;
   margin-top: 20px;
   padding:0;
   text-align: left;
}
.header ol {
   margin-top: -32px;
   width: 888px;
   padding:0;
   margin-left: 10px;
}
.header li {
     font-weight: bold;
     display: inline;
     padding-right: 20px;
     padding-left: 20px;
     border-right: solid 1px;
     border-right-color: #FFFFFF;
}

我在这里缺少一些基本的东西吗？做一些搜索似乎并没有为我提供解决方案。有一些建议在LI上使用display: inline;，但这似乎没有任何区别。我正在寻找的行为是Chrome和Firefox中显示的链接的水平排序。

Answer 1

IE8及更低版本的IE在许多块级元素上实现display:inline时遇到问题。

您可以尝试float li s ...

所以删除display:inline并替换为float:left

之类的内容

IE中的有序列表垂直，其他地方的水平

1 个答案: