柔性盒/網格布局中的最后邊距/填充折疊我有一個列表的項目，我試圖安排成一個滾動的水平布局與柔性盒。容器中的每一項都有左邊和右邊，但最后一項的右邊距正在折疊。有什么辦法阻止這種情況發生，還是有一個好的解決辦法？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>
3 回答
慕少森
TA貢獻2019條經驗 獲得超9個贊
你的問題不在于保證金本身。這是滾動條，只標注元素的可見內容。
要解決這個問題，一種方法是創建一個占用邊距的可見元素。
此解決方案在最后一個子節點上使用偽處理。
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>
猛跑小豬
TA貢獻1858條經驗 獲得超8個贊
你可以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>
- 3 回答
- 0 關注
- 553 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消