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

Question

我一直在尝试为我的导航栏设置背景颜色，但不知何故我的代码无法正常工作。这是使用的 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>

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

Answer 1

导致您出现问题的原因是 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>

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

Why can't I set a background-color for my navbar?

html

css

html-lists

nav

navbar