无法更改导航栏的背景颜色

Question

我无法更改导航栏具有的背景颜色。 我没有使用任何框架，所以没有冲突。 这是我尝试过的代码：

 .navigation-right { float: right; } .navigation-left { float: left; } .navigation-main { background-color: #000; width: 100%; } .navigation-main li { display: inline-block; padding: 10px; } .navigation-main a { color: #F2F2F2; text-decoration: none; } 

 <div class="container"> <section class="navigation"> <nav class="navigation-main"> <ul> <div class="navigation-right"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> <div class="navigation-left"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> </ul> </nav> </section> 

Answer 1

您缺少一个溢出：隐藏在浮动元素的父级中。 没有它，浏览器将无法计算高度，因此背景色无法通过。 尝试将以下行添加到CSS：

.navigation-main{
    background-color: #000;
    width: 100%;
    overflow: hidden; // Add this
}

Answer 2

您必须清理浮子 。 使用overflow是一种偷偷摸摸的方法，尽管并非总是可取的。 我认为，最好的方法是使用伪元素，如下所示：

 /* Clear */ ul::after { content: ""; display: table; clear: both; } .navigation-right { float: right; } .navigation-left { float: left; } .navigation-main { background-color: #000; width: 100%; } .navigation-main li { display: inline-block; padding: 10px; } .navigation-main a { color: #F2F2F2; text-decoration: none; } 

 <div class="container"> <section class="navigation"> <nav class="navigation-main"> <ul> <div class="navigation-right"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> <div class="navigation-left"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> </ul> </nav> </section> 

但是请注意，您不应像这样在div列表内拆分菜单。 而是，创建两个单独的列表。

Answer 3

只是纠正了HTML，并添加溢出：隐藏到你.navigation-main{...} 的jsfiddle有

Teknotica也有它:)