我有一个项目列表,我试图安排到一个可滚动的水平布局与flexbox.
容器中的每个项目都有左右边距,但最后一个项目的右边距正在折叠.
有没有办法阻止这种情况发生,或者是一个好的解决方法？
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>