为什么我不能为导航栏设置背景颜色？

如何解决为什么我不能为导航栏设置背景颜色？

我一直在尝试为我的导航栏设置背景颜色，但不知何故我的代码不起作用。 这是使用的 HTML 和 CSS：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: red;
}

li {
  float: right;
}

a {
  display: block;
  padding: 8px;
}

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

我还尝试向导航选择器添加背景颜色属性。

解决方法

导致您出现问题的原因是 float:right 属性阻止您的 ul 具有宽度

您可以使用 display: flex

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: red;
  display: flex;
  justify-content: flex-end;
}

a {
  display: block;
  padding: 8px;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>