html - 水平 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;
}

有什么线索吗？

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

缺口

Answer 1

.horizontal-menu { white-space: nowrap }

将强制li-elements 保持在一行中。

如果您想以这种方式使用填充，这应该可以修复意外的换行符。

* { margin:0; padding: 0 }

可以修复几个浏览器不一致的问题。或者集成一个CSS 重置

---

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

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

解释：
margin: 0 auto; >> top/bottom margin
margin: 0 auto ; >> 左/右页边距。