删除列表项左侧的空格

Question

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元素上有左边距,如下所示,

---

检查li元素上还有右边距,如下所示

---

预期产出

1)为什么存在这些边际空间？

2)如何避免这些边际空间？

Answer 1

左侧的空白是由默认填充引起的ul.删除它:

ul { padding-left: 0; }

请注意,某些浏览器可能会使用margin而不是padding此缩进.

右边的空白是由flex-wrap属性引起的.当flex项目换行时,容器不会重新计算其宽度以收缩包装新布局.

通过水平调整窗口大小,您将在此演示中看到正确的间距.

以下是一些更多详细信息和可能的解决方法:

• 在容器包装时使容器缩小到适合的子元素
• 如何使Flex容器居中但左对齐flex项目