在設(shè)計(jì)網(wǎng)站時(shí)，我們經(jīng)常需要將圖片、文本等內(nèi)容沿著一個(gè)方向排列，這時(shí)候我們通常會(huì)使用li平鋪，但是如何控制li元素之間的間距呢？這里我們介紹一下使用CSS代碼控制li平鋪間距的方法。

ul {
list-style: none; /* 去除li的默認(rèn)樣式 */
margin: 0;
padding: 0;
display: flex; /* 將ul設(shè)置為彈性容器 */
justify-content: space-between; /* 讓li元素平均分布在容器內(nèi) */
flex-wrap: wrap; /* 當(dāng)容器寬度不足以容納所有l(wèi)i元素時(shí)自動(dòng)換行 */
}
li {
flex-basis: 23%; /* 因?yàn)橛虚g距，所以不能直接平分，這里設(shè)置成23% */
margin-bottom: 20px; /* 設(shè)置li元素之間的垂直間距 */
}

以上代碼中，我們首先將li元素所在的ul設(shè)置為彈性容器，通過設(shè)置justify-content: space-between;讓li元素平均分布在容器內(nèi)，并且flex-wrap: wrap;屬性可以使得li元素在容器寬度不足以容納所有元素時(shí)自動(dòng)換行，最后通過設(shè)置li元素的flex-basis屬性和margin-bottom屬性，控制li元素之間的橫向和縱向間距。

通過這種方法，我們可以靈活地控制li元素之間的間距，讓頁面呈現(xiàn)出更加美觀的效果。