我的CSS菜单有什么问题?

尝试。

#nav li {
    display:inline;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; 
}

#nav li a {
    display:inline-block;
    margin: 0 1px 0 0;
    padding: 4px 9px;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    color: #111;
}

当您浮动项目时,包装器(在本例中是ul)无法环绕以显示背景。

另一种选择是执行“添加”以使HTML如下所示:

<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>
        <li class="clear"> </li>
    </ul>
</div>

并将其添加到CSS中:

#nav li.clear {
    float:none;
    clear:both;
    height:1px;
}

问题是你的 <ul> 技术上不包含任何内容,因为 <li> 元素是浮动的。这意味着 <UL & GT; 没有真正的“内部”渲染。

解决方案很简单,只需添加 overflow:hidden 对你 #nav ul 风格。这是一项巧妙的工作 Clearfix黑客 .

这是一篇有趣的博客文章 about the clearfix issue 如果你想更多地了解它。

好的,如果我理解正确的话,那么您希望导航栏的背景可以延伸到整个页面。

首先,您需要添加 width:100%; 对你 #nav 在CSS文件中声明。第二,你可能需要补充 background-color: #f5f5f5; 另外,为了保持整个分区的颜色一致性,否则您将无法判断整个分区的颜色一致性。