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

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 {&nbsp; list-style-type: none;&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; display: flex;&nbsp; height: 300px;&nbsp; overflow: auto;&nbsp; width: 600px;&nbsp; background: orange;}ul li {&nbsp; background: blue;&nbsp; color: #fff;&nbsp; padding: 90px;&nbsp; margin: 0 30px;&nbsp; white-space: nowrap;&nbsp; flex-basis: auto;&nbsp; position: relative;}li:last-child:after {&nbsp; content: "";&nbsp; width: 30px;&nbsp; height: 1px;&nbsp; position: absolute;&nbsp; left: 100%;&nbsp; top: 0px;}<div class"container">&nbsp; <ul>&nbsp; &nbsp; <li>Item 1</li>&nbsp; &nbsp; <li>Item 2</li>&nbsp; &nbsp; <li>Item 3</li>&nbsp; &nbsp; <li>Item 4</li>&nbsp; </ul></div>

Answer 2

你可以width和overflow在div容器，并设置display: inline-flex而不是flex在ul，这样就可以根据内部的项目来计算FLEX框的大小，并且所有填充和页边距都将适用，不会出现任何问题。.container {&nbsp; width: 600px;&nbsp; overflow: auto;}.container ul {&nbsp; list-style: none;&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; display: inline-flex;&nbsp; background: orange;}.container li {&nbsp; padding: 60px;&nbsp; margin: 0 30px;&nbsp; white-space: nowrap;&nbsp; background: blue;&nbsp; color: #fff;}<div class="container">&nbsp; <ul>&nbsp; &nbsp; <li>Item 1</li>&nbsp; &nbsp; <li>Item 2</li>&nbsp; &nbsp; <li>Item 3</li>&nbsp; &nbsp; <li>Item 4</li>&nbsp; </ul></div>