ul {
display: flex;
flex-wrap: wrap;
width: 45%;
height: 40%;
border: 1px solid red;
list-style: none;
margin: 0 auto;
}
ul li {
flex: 1;
}<ul>
<li><img src="images/yellow.gif" alt="Yellow"></li>
<li><img src="images/orange.gif" alt="Orange"></li>
<li><img src="images/purple.gif" alt="Purple"></li>
<li><img src="images/blue.gif" alt="Blue"> </li>
<li><img src="images/pink.gif" alt="Pink"> </li>
<li><img src="images/green.gif" alt="Green"> </li>
<li><img src="images/black.gif" alt="Black"> </li>
<li><img src="images/gray.gif" alt="Gray"> </li>
<li><img src="images/red.gif" alt="Red"> </li>
</ul>实际输出
根据实际输出，检查ul元素有left-margin，如下所示，
检查 li 元素也有右边距，如下所示
预期输出
1)为什么会存在这些边距空间？
2)如何避免这些边距空间？
最佳答案
左边的空白是由 ul 上的默认填充引起的。删除它:
ul { padding-left: 0; }
请注意，某些浏览器可能会使用 margin 而不是 padding 来缩进。
右边的空白是由 flex-wrap 属性引起的。当 flex 元素换行时，容器不会重新计算其宽度以收缩换行新布局。
通过水平调整窗口大小，您会看到正确的间距来来去去 in this demo .
以下是更多详细信息和可能的解决方法:
关于html - 删除列表项左侧的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34657121/