html - 我怎样才能使水平容器中的列表项均匀地填充整个容器而没有间距？

Question

我已经使用 flexbox 制作了一个水平列表，它均匀地填充了它的容器。

但是当我尝试在悬停期间更改列表项的背景时，您会看到每个元素之间都有空白。有什么方法可以在使列表项填满容器的整个宽度的同时摆脱这种情况？

.wrapper {
  margin-top: 30px;
  border: 1px solid lightblue;
  width: 100%;
}

ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

li {
  color: black;
  cursor: pointer;
  list-style: none
}

li:hover {
  background-color: lightblue;
  color: white;
}

<div class="wrapper">
  <ul>
    <li>123</li>
    <li>ABC</li>
    <li>789</li>
    <li>XYZ</li>
  </ul>
</div>

例如，这里的元素间隔均匀，但每个元素之间有很多空间。

当我将鼠标悬停在列表项上时，我想要的是这样的:

有什么办法吗？

Answer 1

删除所有外部填充/边距，然后使用 flex:1 和 li 内的填充:

.wrapper {
  margin-top: 30px;
  border: 1px solid lightblue;
  width: 100%;
}

ul {
  padding:0;
  margin:0;
  display: flex;
  flex-wrap: wrap;
}

li {
  color: black;
  flex:1;
  text-align:center;
  padding:10px 0;
  cursor: pointer;
  list-style: none
}

li:hover {
  background-color: lightblue;
  color: white;
}

<div class="wrapper">
  <ul>
    <li>123</li>
    <li>ABC</li>
    <li>789</li>
    <li>XYZ</li>
  </ul>
</div>