导航菜单问题与css（背景不出现在整个div后面） [英] navigation menu issues with css (background is not appearing behind the whole div)

问题描述

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

I am writing a css code for a webpage, i have a navigation menu on the top with the code:

    <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包括：

The css for nav-menu include:

.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）框后面，而不是在后面的。任何人都可以看到这里的问题是什么？

However, it is not showing bgcolor.jpg behind the whole div, it is just showing it behind the (li) boxes and not behind the while div. Can anyone see what the problem is here?

感谢您的帮助（如果你需要更多的解释问题，请问，我会编辑这个答案） p>

Thank you for your help (if you need more explanation about the problem please ask and i will edit this with answers)

推荐答案

您的容器div正在折叠，因为height不会从列表项继承。在ul后添加清除：

Your container div is collapsing because height is not inherited from list items. Add a clear after the 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后面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！