Question

我正在为网页编写一个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后面。任何人都可以看到问题在这里吗？

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

Answer 1

听起来像一个漂浮的问题。试试这个：

.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;
}

Answer 2

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

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

导航菜单问题与css（背景不出现在整个div后面）

2 个答案: