html - 我的 CSS 菜单有什么问题？

Question

结果是:http://img198.imageshack.us/img198/746/93502273.jpg

您可以在侧面看到明显的“空白”。

我有:

<div id="nav">
    <ul>
        <li id="n-home"><a href="/">Home</a></li>
        <li id="n-search"><a href="/search/">Search</a></li>
        <li id="n-advertisers"><a href="/advertisers/">Advertisers</a></li>
        <li id="n-something"><a href="/something/">Something</a></li>
        <li id="n-contact"><a href="/contact/">Contact</a></li>
    </ul>
</div>

和

/* Navigation
---------------------------------------------------------- */

#nav {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    }
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #f5f5f5;
    width: 100%;
    }
#nav li {
    float: left;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; 
    }
#nav li a {
    float: left;
    margin: 0 1px 0 0;
    padding: 4px 9px;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    color: #111;
    }

#nav li a:hover {
    text-decoration: underline;
    }

Answer 1

问题是你的 <ul>技术上不包含任何内容，因为所有 <li>元素是 float 的。这意味着 <ul>并没有真正的“内部”来渲染。

解决方案就像添加 overflow:hidden 一样简单给你的#nav ul风格。这是对所谓的 clearfix hack 的巧妙解决方法。

这是一篇有趣的博文 about the clearfix issue如果您想了解更多相关信息。