水平列表不移动LI

好的，所以我正在为导航栏编写CSS，该导航栏使用无序列表来组织菜单。菜单居中不会推到任何一边，任何给定的li元素的宽度不能预先确定（它随菜单项中文本的多少而变化），所以我不能硬编码宽度。水平列表不移动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; 
}

的导航元素，这完美的作品产生居中导航菜单在Chrome 13。但是，当我在IE8浏览网页时，UL圈垂直，我不能让它变成水平。

到目前为止，搜索结果表明我需要float:left;或float:right; <LI> 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>

有没有，而无需知道李家的宽度或不必诉诸JS得到菜单中心和水平什么办法？

来源

2011-08-04 Jabbany

该代码工作正常IE8，看看自己：

http://jsfiddle.net/bEEEb/

它可能并不适合你的工作，因为你在IE8模式（IE7模式或Quirks模式的替代品）不是。

添加DOCTYPE作为第一行，如果你没有一个：

<!DOCTYPE html>

如果您需要这在IE7也工作（其中inline-block只适用于在默认情况下自然地内联元素），然后用replace display: inline-block：

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

..of当然，如果你能display: inline脱身，这是最简单的修复，但你还是应该明白为什么没有被显示在IE8模式页面。

来源

2011-08-04 16:00:30 thirtydot

我看，谢谢你的这个提示。我试图达到最高的浏览器兼容性。 – Jabbany

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

来源

2011-08-04 15:55:20 Michael

感谢您的提示。这工作完美〜 – Jabbany

只是用你的李以下几点：

display: inline;

应该让你的愿望的结果。

来源

2011-08-04 15:56:32 Hanny

水平列表不移动LI

回答

相关问题