<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>scss 代碼: ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li{
flex: 0 0 24%;
border:1px solid red;
height: 40px;
}
}如果li的數量 是剛好被 4 整除是沒問題的 如果多了最后一個就會跑到右邊有什么辦法讓li的每一行的第一個左邊沒有距離 右邊也沒有距離 但是中間的兩個是有距離的???也試著用偽元素去解決 但是偽元素會讓最后一個和倒數第二個沒有距離 到這里后又想著給倒數第二個加margin-right 加了之后是有辦法解決 但是如果li的數量剛好被4整除就會有問題....糾結啊!!!
1 回答
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
ul層flex左對齊
li層通過margin實現間距
第4n個右邊距為0
剩下1%的邊距由第4n+1個左邊實現0.5%，實現左右留白間距
// 最終實現ul { display: flex;
flex-wrap: wrap;
justify-content: left;
li { flex: 0 0 24%;
margin-right: 1%; border:1px solid red;
box-sizing: border-box;
height: 40px;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-child(4n+1) {
margin-left: 0.5%;
}
}
}- 1 回答
- 0 關注
- 2157 瀏覽
添加回答
舉報
0/150
提交
取消