如何在沒有 :last-child 的情況下刪除行中最後一個元素的邊距？

刪除行中最後一個元素的邊距

刪除行中最後一個元素的邊距是網頁設計中的常見挑戰。雖然 :last-child 可用於刪除清單中最後一個元素的邊距，但當元素動態調整大小或每行元素數量未知時，這種方法並不理想。

負邊距

一個解是在父元素上使用負邊距。這種方法會產生一種錯覺，即子元素適合父元素，同時保留各個元素之間的間距：

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

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

但是，此技術可能需要額外的樣式（例如溢出-x：隱藏)以防止水平滾動.

媒體查詢

如果每行的元素數量是可預測的，則可以使用媒體查詢使用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;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}</code>

使用的特定第 n 個子選擇器將根據每行元素的數量而變化。

以上是如何在沒有 :last-child 的情況下刪除行中最後一個元素的邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！