删除列表项左侧的空间 [英] Remove space on the left of list items

问题描述

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元素时会留有余量，如下所示，

As per the actual output, there is left-margin on inspecting ul element, as shown below,

检查li元素也有右边距，如下所示

there is also right-margin on inspecting li element, as shown below

1)为什么这些边距空间存在?

1) Why these margin space exist?

2)如何避免这些边距空间?

2) How to avoid these margin space?

推荐答案

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

The whitespace on the left is caused by the default padding on the ul. Remove it with:

ul { padding-left: 0; }

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

Note that some browsers may use margin instead of padding for this indentation.

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

The whitespace on the right is caused by the flex-wrap property. When flex items wrap, the container does not recalculate its width to shrink-wrap the new layout.

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

By re-sizing the window horizontally, you'll see the right spacing come and go in this demo.

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

Here are some more details and a possible workaround:

• 在包装时使容器收缩以适合子元素
• 如何居中放置弹性容器，但将弹性项目左对齐

• Make container shrink-to-fit child elements as they wrap
• How to center a flex container but left-align flex items

这篇关于删除列表项左侧的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！