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 元素保持在一行中。

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

* { margin:0; padding: 0 }

可以修复几个浏览器不一致的问题。或者整合一个CSS reset

---

要在所有浏览器中居中导航，您可以从 .horizo​​ntal-menu 中移除宽度并将其设置为 display: inline 并通过 margin 将其居中: 0 自动:

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

解释:
margin :0 自动； >> 上/下边距
边距:0 自动； >> 左/右边距。