css 的导航菜单问题（背景没有出现在整个 div 后面）答案

【问题标题】：navigation menu issues with css (background is not appearing behind the whole div)css 的导航菜单问题（背景没有出现在整个 div 后面）
【发布时间】：2010-03-04 20:44:51
【问题描述】：

我正在为网页编写 css 代码，顶部有一个导航菜单，代码如下：

    <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>

导航菜单的css包括：

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
}

.nav-menu li {
float: left;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
}

.nav-menu li a {
background: url(bgcolor.jpg) repeat-x;
line-height: 36px;
height: 40px;
float: left;
width: 9em;
border-top: 1px solid #01607E;
border-right: 1px solid #01607E;
border-bottom: 1px solid #01607E;
color: white;
font-family: "Lucida Sans";
font-size: 10pt;
text-decoration: none;
text-align: center;
}

但是，它并没有在整个 div 后面显示 bgcolor.jpg，它只是在 (li) 框后面显示，而不是在 while div 后面。谁能看出这是什么问题？

感谢您的帮助（如果您需要有关该问题的更多解释，请询问，我将对此进行编辑并提供答案）

【问题讨论】：

标签： html css xhtml

【解决方案1】：

您的容器 div 正在折叠，因为高度不是从列表项继承的。在ul后面加一个clear：

        <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
<div style="clear:both;"></div>
    </div>

【讨论】：

【解决方案2】：

听起来像是一个浮动问题。试试这个：

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
    overflow:hidden;
}

或者如果这不起作用：

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
    overflow:hidden;
}

【讨论】：