水平ul菜单在IE中无法正确显示 - 获取压缩

Question

我在尝试查看屏幕截图时遇到水平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;
}

任何线索的家伙？

现在真的让我感到困惑：欢呼声

尼克

Answer 1

.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 自动; ＆GT;＆GT;上/下边距
保证金：0 自动; ＆GT;＆GT;左/右边距。