This question already has answers here:
Last margin / padding collapsing in flexbox / grid layout

(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>

10-05 20:43
查看更多