好的，我正在为使用无序列表组织菜单的导航栏编写 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;
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 来使菜单居中和水平？
最佳答案
该代码在 IE8 中运行良好，请自行查看:
它可能对你不起作用，因为你没有处于 IE8 模式(IE7 模式或 Quirks 模式是替代方案)。
如果没有文档类型，请在第一行添加:
<!DOCTYPE html>
如果您需要它也能在 IE7 中工作(其中 inline-block 默认仅适用于自然内联元素)，那么 replace display: inline-block与:
display: inline-block;
*display: inline;
zoom: 1;
..当然，如果您可以使用 display: inline，这是最简单的解决方法，但您仍然应该弄清楚为什么您的页面无法在 IE8 模式下显示。
关于html - 没有 float LI 的水平列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6944550/