Question

好的，所以我正在为导航栏编写CSS，导航栏使用无序列表来组织菜单。菜单居中而不是推到任何一侧，并且任何给定li元素的宽度都无法预先确定（它随菜单项中的文本数量而变化），因此我无法对宽度进行硬编码。

我有以下CSS代码：

#nav ul {
    list-style: none;
    padding-bottom: 10px;
    height:16px;
}
#nav ul li {
    position: relative;
    display: inline-block;
}
#nav {
    position: relative;
    margin-top: -30px;
    text-align: center;
    font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
    font-size: 14px;
}

对于nav元素，这非常适合在Chrome 13中生成居中的导航菜单。但是当我在IE8中查看页面时，UL会变为垂直，我无法使其变为水平。

到目前为止，搜索结果表明我需要float:left;或float:right;＆lt; LI＆gt; s才能使菜单水平。我试过这个，它确实使IE8中的菜单水平但它会向左或向右浮动。我需要将菜单居中，显然没有float:center;。

与菜单对应的HTML是

<div id="nav">
    <ul>
        <li class="current_page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
    </ul>
</div>

有没有办法不需要知道LI的宽度或不得不求助于JS使菜单居中和水平？

Answer 1

只需在你的li上使用以下内容：

display: inline;

应该能得到你想要的结果。

Answer 2

该代码在IE8中运行良好，请亲自看看：

http://jsfiddle.net/bEEEb/

它可能不适合您，因为您不在IE8模式下（IE7模式或Quirks模式是替代方案）。

如果您没有doctype，请添加doctype作为第一行：

<!DOCTYPE html>

如果您需要在IE7中工作（默认情况下inline-block仅适用于自然内联元素），则replace display: inline-block使用：

display: inline-block;
*display: inline;
zoom: 1;

..当然，如果您可以使用display: inline，这是最简单的修复，但您仍然应该弄清楚为什么您的网页未在IE8模式下显示。 < / p>

Answer 3

IE不支持display: inline-block，而是使用display: inline代替你的li元素。

水平列表没有浮动LI

3 个答案: