如何從每個元素中刪除一行中的最後一個元素的邊距？

Question

如何從上一列的每個<li>刪除保證金？我要求每個<li>，當我有9 <li>和每列3時，在最後一列。我不要求只是從一個<ul>的最後<li>最後一個項目，我已經知道:last-child { margin-right: 0 }

如果屏幕很小或用戶調整瀏覽器刪除margin然後3 + 3 + 3可以成爲4 + 5或2 + 2 + 2 + 2 + 1

所以在任何情況下任何<li>（它可以是一個或多於一個），其進來最後一列。我想刪除margin-right。

所有鋰是單個UL

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    <li>item 7</li> 
    <li>item 8</li> 
    <li>item 9</li> 
</ul> 

我加的jsfiddle這裏內：http://jsfiddle.net/GnUjA/1/

Answer 1

編輯：答案在看樣品HTML

你想要做什麼之後重寫用CSS是不可能的。原因是你想要基於渲染布局對元素進行樣式設置，其中CSS僅允許您基於文檔結構工作。

像這樣的東西只能用客戶端腳本（Javascript）來實現，它可以查詢渲染的佈局屬性並相應地執行。

Answer 2

我相信這是你想要的（jQuery的）：

http://jsfiddle.net/PKstQ/

如果撥弄證明你正在尋找做（除了邊距，而不是背景色），那麼，什麼你不能做與CSS。你將需要JavaScript。如果jQuery是可以接受的，那麼可以很容易地修改該張貼的小提琴。將它變成純粹的js也是相對微不足道的。

Answer 3

對我來說，更有意義的是讓ul左邊的一些填充使它變平。

我說：ul { padding-left: 10px; } - http://jsfiddle.net/GnUjA/30/

取決於它是否會是必要的，但同時真正接觸到頂部：

ul { padding-top: 10px; padding-left: 10px; } - http://jsfiddle.net/GnUjA/31/

Answer 4

卸下或各行的特定元素上加入花式除非您確切知道每行有多少元素（通過nth-child()系列選擇器），否則無法用純CSS完成。

切緣陰性

你可以在利潤的情況下，做的是通過父元素添加切緣陰性僞裝他們。這會給你的孩子元素適合父元素裏面，同時還具有各要素間的距離錯覺：在半

http://codepen.io/cimmanon/pen/dwbHi

ul { 
    margin-left: -5px; 
    margin-right: -5px; 
} 

li { 
    margin-left: 5px; 
    margin-right: 5px; 
} 

分裂的保證金，並將其設置在兩側（margin-left: 5px; margin-right: 5px）可（margin-right: 10px），特別是如果您的設計需要與LRT 和 RTL方向一起工作，那麼結果會更好。

注意：這可能需要在祖先元素上添加overflow-x: hidden以防止水平滾動，具體取決於容器元素的位置與視口邊緣的距離。

媒體查詢

如果你能合理地預測有多少項目存在將是每行，你可以使用媒體查詢通過nth-child()爲目標的行中的最後一個項目。這比使用負邊距要冗長得多，但它可以讓你進行其他樣式調整：

@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; 
    } 
} 
/* etc. */