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

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 There

Teknotica也有：）