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

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

您在 float 元素的父级中缺少 overflow:hidden。没有它，浏览器无法计算高度，因此背景颜色无法显示。尝试将这一行添加到您的 CSS:

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