css - 背景颜色未填满整个 li

Question

我制作了一个菜单，想为其中一个菜单项添加背景颜色。添加背景颜色后，左侧有一个小空间没有被颜色覆盖。有谁知道我怎样才能填满整个空间？

这是一个 fiddle :https://jsfiddle.net/9crtzv6s/1/

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}

<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

Answer 1

内联元素，如列表项，对代码中的空格敏感，因此要么删除空格，要么不将显示设置为内联 block ，而是将列表项向左浮动。

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  float: left;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}

<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

或者

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}

<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li><li><a href="#" class="slider-2">Menu</a>
    </li><li><a href="#" class="slider-3">Menu</a>
    </li><li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>