html - IE中无法正确显示水平ul菜单-压扁

我在尝试查看屏幕截图的水平UL菜单时遇到问题...

在Chrome中，它的工作原理非常好：


在IE-8中看起来像这样：


这是我的代码：

<div class="navbar-top">
    <ul class="horizontal-menu">
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
    </ul>

</div>

和CSS：

.horizontal-menu {
    width: 440px;
}

.horizontal-menu li {
    display: inline;
    list-style-type: none;
    padding-left: 40px;
}

有什么线索吗？

现在真的很困惑我：p干杯

缺口

最佳答案

.horizontal-menu { white-space: nowrap }

将强制li元素保持一行。

如果您想以这种方式填充，这应该可以解决意外的换行符。

* { margin:0; padding: 0 }

可以解决几个浏览器不一致的问题。或整合CSS reset



要使导航在所有浏览器中居中，可以从.horizontal-menu删除宽度并将其设置为display: inline并通过margin: 0 auto居中：

.horizontal-menu {
    display: inline;
    margin: 0 auto;
}

说明：
保证金：0自动; >>上/下边距
保证金：0自动; >>左/右边距。

关于html - IE中无法正确显示水平ul菜单-压扁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11010941/