问题描述
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
这篇关于删除列表项左侧的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!