html - 如何使背景颜色填充 li 标签的整个元素

Question

嘿，所以我有一个水平导航栏，它是我使用 li 标签制作的，当我尝试填充“事件”标签的背景时，背景颜色只会填充在单词周围，而不是整个盒子`

#menuBar ul {
  list-style: none;
  margin-top: 0px;
}

#menuBar ul li {
  float: left;
  width: 22%;
  font-size: 36pt;
  color: red;
  padding-top: 0px;
  border-style: solid;
  border-color: black;
  border-width: thin;
  text-align: center;
  margin-left: 0px;
  margin-right: 0px;
}

#content h1 {
  display: block;
  clear: both;
}

.active {
  background-color: red;
  color: yellow;
}

<div id="menuBar">
  <ul>
    <li class="home"><a class="active" href="#">Home</a></li>
    <li class="location"><a href="#">Location</a></li>
    <li class="history"><a href="#">History</a></li>
    <li class="culture"><a href="#">Culture</a></li>
  </ul>
</div>

Answer 1

将 a 设为 block 元素，问题将得到解决:

body {
 margin:0;
}
#menuBar ul {
  list-style: none;
  margin-top: 0px;
}

#menuBar ul li {
  float: left;
  width: 23%;
  font-size: 36pt;
  color: red;
  padding-top: 0px;
  border-style: solid;
  border-color: black;
  border-width: thin;
  text-align: center;
  margin-left: 0px;
  margin-right: 0px;
}
#menuBar ul li a {
  display:block;
}

#content h1 {
  display: block;
  clear: both;
}

.active {
  background-color: red;
  color: yellow;
}

<div id="menuBar">
  <ul>
    <li class="home"><a class="active" href="#">Home</a></li>
    <li class="location"><a href="#">Location</a></li>
    <li class="history"><a href="#">History</a></li>
    <li class="culture"><a href="#">Culture</a></li>
  </ul>
</div>

顺便说一句，我建议您考虑一种更好的方法来创建菜单。使用 flex 而不是 float:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#menuBar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#menuBar ul li {
  flex: 1;
  font-size: 36pt;
  color: red;
  padding-top: 0px;
  border-style: solid;
  border-color: black;
  border-width: thin;
  text-align: center;
  margin: 0;
}

#menuBar ul li a {
  display: block;
}

.active {
  background-color: red;
  color: yellow;
}

<div id="menuBar">
  <ul>
    <li class="home"><a class="active" href="#">Home</a></li>
    <li class="location"><a href="#">Location</a></li>
    <li class="history"><a href="#">History</a></li>
    <li class="culture"><a href="#">Culture</a></li>
  </ul>
</div>