UI LI菜单在IE中不显示为Block

时间:2013-10-21 16:13:30

标签: html css internet-explorer html-lists

我有一个在Firefox和Chrome中正常显示的菜单,在IE8中它显示为垂直列表而不是水平菜单。

我不确定为什么这不起作用。 我有一个doctype,我通过谷歌链接到html5 js。

任何建议将不胜感激。 提前感谢您的时间。

CSS:

#tools {position: absolute; top: -23px; right: 7px; font-size: 0.75em;} 
#tools li {list-style:none; display: inline-block; padding: 0px 10px; border-left: 1px solid #e8e4d8; line-height: 1; margin: 0;}
#tools li:first-child {padding-left: 0; border-left: 0;}
#tools a {color: #e8e4d8; line-height: 1; margin: 0; padding: 0 0 1px 0; display: block; text-decoration: none;}
#tools a:hover {text-decoration: underline;}

HTML:

注意:不确定原因,但我很难显示从这里开始的div。所以在uldiv id“工具”

之前
< div id="tools" >         
<ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li id="last_tool"><a href="">link</a></li>
</ul>
</div>

1 个答案:

答案 0 :(得分:0)

您需要将float:left设置为列表项:

#tools li {list-style:none; display: inline-block; padding: 0px 10px; border-left: 1px solid #e8e4d8; line-height: 1; margin: 0; float: left;}