如何使水平容器中的列表项均匀地填充整个容器而没有间距？答案

【问题标题】：How can i make list items in a horizontal container fill the entire container evenly without spacing between?如何使水平容器中的列表项均匀地填充整个容器而没有间距？
【发布时间】：2018-03-20 21:34:27
【问题描述】：

我使用 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>

例如这里的项目是均匀分布的，但每个项目之间有很多空间。

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

任何想法如何做到这一点？

【问题讨论】：

有什么理由将其标记为 Bootstrap？
@ZimSystem 打扰 ZimSystem :p
哈哈哈，哈哈@TemaniAfif

标签： html css flexbox

【解决方案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>

【讨论】：

谢谢！删除填充和边距就可以了。还添加了 flex: 1 0 auto 以防止文本换行。
@mTv 是的，你有很多使用 flex 属性的可能性来实现这一点；）

【解决方案2】：

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

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

【讨论】：