如何在水平容器中制作列表项均匀地填充整个容器而不间隔？

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

删除所有extern填充/边距，然后在flex:1内使用li和填充：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

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

li {
  width: 100%;
  color: black;
  cursor: pointer;
  list-style: none;
  text-align: center;
  padding: 15px 0;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;