Question

以下是我的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;
}

Answer 1

这将解决您的问题

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

演示 http://jsfiddle.net/gaby/Gb22V/

Answer 2

那是因为你浮动了nav元素的唯一子元素ul元素。这使得nav元素的高度等于0.通过向overflow: hidden添加nav声明（或使用任何其他方法来清除浮动）来清除浮动，它将起作用。< / p>

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

请参阅fiddle。

Answer 3

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

菜单的内联UL不呈现父元素的背景

3 个答案: