菜单的嵌入式UL不会呈现父元素的背景

问题描述

| 以下是我的HTML和CSS。我期望导航栏的背景颜色为4d4030，但不会呈现背景。有人有想法吗？谢谢！！

       <div id=\"nav\">
            <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Clients</li>
            </ul>
        </div>



#nav {
    background-color: #4d4030;  

}



#nav ul{
    padding: 0;
    float: left;  
}

#nav ul li{    
    display: inline;         
}

#nav ul li a{
    float: left; text-decoration: none;
    color: #FFFFFF;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 18px;
    display: block;
    border-right: 1px #FFFFFF;
}

    

解决方法

        这将解决您的问题

#nav {
    background-color: #4d4030;  
    overflow:hidden;
}

演示http://jsfiddle.net/gaby/Gb22V/     ,        那是因为您将

nav

元素（即float3ѭ元素）的唯一子元素浮动。这使

nav

元素的高度等于0。通过向

nav

添加

overflow: hidden

声明（或使用任何其他方法清除浮点数）来清除浮点数，它将起作用。

#nav {
    background-color: #4d4030;  
    overflow: hidden;
}

见小提琴。     ,        的HTML

   <div id=\"nav\">
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Clients</li>
        </ul>
        <div class=\"clear\"></div>
    </div>

的CSS

.clear
{
   clear: both;
}