不浮动LI的水平列表 [英] Horizontal Lists without floating the LI
问题描述
好的，所以我正在为使用无序列表来组织菜单的导航栏编写CSS.菜单居中，没有推到任何一侧，并且任何给定li元素的宽度都无法预先确定(它随菜单项中文本的数量而变化)，因此我无法对宽度进行硬编码.
Okay, so I'm writing CSS for a navigation bar that uses an un-ordered list to organize the menu. The menu is centered not pushed to any side, and the width of any given li element cannot be pre-determined (it varies with how much text is in the menu item), so I can't hardcode widths.
我有以下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中生成居中的nav菜单.但是，当我在IE8中查看页面时，UL变为垂直状态，而我无法使其变为水平状态.
for the nav element, and this works perfectly to produce the centered nav-menu in Chrome 13. But when I view the page in IE8, the UL turns vertical and I can't get it to become horizontal.
到目前为止，搜索结果表明我需要
float:left; 或 float:right; 来使菜单水平.我已经尝试过了，它确实使IE8中的菜单变为水平，但它会向左或向右浮动.我需要将菜单居中，并且显然没有 float:center; .
So far, search results indicate that I need to float:left; or float:right; the <LI>s to make the menu horizontal. I've tried this and it does make the menu horizontal in IE8 but it will float to left or right. I need to center the menus, and apparently there is no 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即可使菜单居中且水平?
Is there any way without needing to know the width of the LIs or having to resort to JS to get the menu centered AND horizontal?
推荐答案
该代码在IE8中运行良好，请亲自查看:
That code works fine in IE8, see for yourself:
它可能对您不起作用，因为您不在IE8模式下(可以选择IE7模式或Quirks模式).
It's probably not working for you because you're not in IE8 Mode (IE7 Mode or Quirks Mode are the alternatives).
如果没有文档类型，请在第一行添加一个文档类型:
Add a doctype as the very first line if you don't have one:
<!DOCTYPE html>
如果您还需要在IE7中使用它(默认情况下， inline-block 仅适用于自然内联元素)，则
If you need this to also work in IE7 (in which inline-block only works with naturally inline elements by default), then replace display: inline-block with:
display: inline-block;
*display: inline;
zoom: 1;
..当然，如果您可以摆脱 display:inline ，这是最简单的解决方法，，但是您仍然应该弄清楚为什么页面无法在IE8模式下显示.
..of course, if you can get away with display: inline, that's the simplest fix, but you should still work out why your page is not being displayed in IE8 Mode.
这篇关于不浮动LI的水平列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
