如何使背景颜色填充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成为一个块元素，问题将得到解决：

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>

Answer 2

您的解决方案已经有效

我用这个简单的html尝试了它

<div id="menuBar">
<ul >
<li>foo</li>
<li>bar</li>
<li class="active">active</li>
<li>baam</li>
</ul>
</div>

此处：JSFiddle