刪除行中最後一個元素的邊距是網頁設計中的常見挑戰。雖然 :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中文網其他相關文章!