Ul LI菜单在IE中未显示为“阻止”

Question

I have a menu that displays properly in Firefox and Chrome, in IE8 it displays as a vertical list rather than a horizontal menu.

I am not sure why this is not working. I have a doctype, and I am linking to the html5 js via google.

Any suggestions would be appreciated. Thank you in advance for your time.

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:

Note: not sure why but I am having a hard time displaying the div that starts here. so before the ul is a div id "tools"

< 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>

Answer 1

您需要将float：设置在列表项上：

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