柔性盒/网格布局中的最后边距/填充折叠

Question

柔性盒/网格布局中的最后边距/填充折叠我有一个列表的项目，我试图安排成一个滚动的水平布局与柔性盒。容器中的每一项都有左边和右边，但最后一项的右边距正在折叠。有什么办法阻止这种情况发生，还是有一个好的解决办法？ul {  list-style-type: none;  padding: 0;  margin: 0;  display: flex;  height: 300px;  overflow: auto;  width: 600px;  background: orange;}ul li {  background: blue;  color: #fff;  padding: 90px;  margin: 0 30px;  white-space: nowrap;  flex-basis: auto;}<div class="container">  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>    <li>Item 4</li>  </ul></div>

Answer 1

你的问题不在于保证金本身。这是滚动条，只标注元素的可见内容。

要解决这个问题，一种方法是创建一个占用边距的可见元素。

此解决方案在最后一个子节点上使用伪处理。

ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

  display: flex;

  height: 300px;

  overflow: auto;

  width: 600px;

  background: orange;

}

ul li {

  background: blue;

  color: #fff;

  padding: 90px;

  margin: 0 30px;

  white-space: nowrap;

  flex-basis: auto;

  position: relative;

}

li:last-child:after {

  content: "";

  width: 30px;

  height: 1px;

  position: absolute;

  left: 100%;

  top: 0px;

}

<div class"container">

  <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

  </ul>

</div>

Answer 2

你可以width和overflow在div容器，并设置display: inline-flex而不是flex在ul，这样就可以根据内部的项目来计算FLEX框的大小，并且所有填充和页边距都将适用，不会出现任何问题。

.container {

  width: 600px;

  overflow: auto;

}

.container ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: inline-flex;

  background: orange;

}

.container li {

  padding: 60px;

  margin: 0 30px;

  white-space: nowrap;

  background: blue;

  color: #fff;

}

<div class="container">

  <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

  </ul>

</div>