當行大小變化時，如何刪除行中最後一個元素的邊距？

如何刪除行中最後一個元素的邊距（無論行大小如何）

在一行中有多個元素的情況，並且每行的元素數量可能會動態變化，因此使用純CSS 刪除每行最後一個元素的邊距可能具有挑戰性。

使用負邊距

一個有效的技巧是在父元素上使用負邊距。這會產生一種錯覺，即子元素完美地適合父元素，同時保持它們之間的間距。

<code class="css">ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}</code>

透過分割邊距並將其應用到兩側，您可以獲得更好的結果，特別是對於需要相容性的設計具有從左到右(LTR) 和從右到左(RTL) 方向。

利用媒體查詢

另一種方法，如果您可以預測特定螢幕尺寸內每行的元素數量，是使用媒體查詢使用nth-child()來定位行中的最後一個元素。此方法允許進行更具體的樣式調整：

<code class="css">@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

/* Add more media queries as needed... */</code>

以上是當行大小變化時，如何刪除行中最後一個元素的邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！