This question already has answers here:
Last margin / padding collapsing in flexbox / grid layout
(4个答案)
3年前关闭。
我用翻译器。
我的意见无法完全通过。
https://codepen.io/anon/pen/bLJREL
与我尝试执行的操作不同,最后一个元素没有空白。
如果您想在'item4'元素之后添加边距怎么办?
(4个答案)
3年前关闭。
我用翻译器。
我的意见无法完全通过。
ul {
display: flex;
overflow-x: auto;
border: 1px solid aqua;
background-color: tomato;
width: 400px;
list-style:none;
padding-left:0px;
}
li {
border: 1px solid Aquamarine;
min-width: 300px;
margin: 10px;
}
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
https://codepen.io/anon/pen/bLJREL
与我尝试执行的操作不同,最后一个元素没有空白。
如果您想在'item4'元素之后添加边距怎么办?
最佳答案
您可以使用:after
伪元素和width
与margin相同的伪元素来创建该空间,但是随后您还需要从最后一个margin-right
中删除li
。
ul {
display: flex;
overflow-x: auto;
border: 1px solid aqua;
background-color: tomato;
width: 400px;
list-style: none;
padding-left: 0;
}
ul:after {
content: '';
flex: 0 0 10px;
}
li {
border: 1px solid Aquamarine;
min-width: 300px;
margin: 10px;
}
li:last-child {
margin-right: 0;
}
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>