如何使3列嵌套列表只有內部排水溝（沒有外部邊距）？

我有一個與其他一切排列我的嵌套列表的輕微問題。我使用semantic.gs網格作爲網站：http://grrr.dontmeshwithus.com/ 正如您所看到的，底部的嵌套列表與上面的黑線或div「幻燈片」不一致。外部名單的左右兩邊有一個小小的差距。您可以通過調整瀏覽器窗口的大小來更清楚地看到問題。如何使3列嵌套列表只有內部排水溝（沒有外部邊距）？

有沒有任何處理這個技巧或方法？我發現我可以擺脫這種差距的唯一方法是使用CSS3列，但它們不能跨瀏覽器工作。有沒有辦法讓它們跨瀏覽器工作？或者還有另一種方法只給列表項目內邊距？或者我應該只使用CSS3列，併爲IE做一個後備.. ..？

HTML：

<article id="memberContainer"> 
    <ul id="memberList"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
    </ul> 
</article>

CSS（/ LESS）：

@columns: 12; 
@column-width: 81; 
@gutter-width: 19; 
@total-width: 100%; 

    #memberContainer { 
    .border; 
    ul#memberList { 
     .row(9); 
     li { 
     .column(3,9); 
     margin-top: 1em; 
     } 
    } 
    }

，我使用可以在這裏找到的semantic.gs格： https://github.com/twigkit/semantic.gs/blob/master/stylesheets/less/grid.less

感謝

來源

2012-04-22 hlotvonen

您可以隨時嘗試：first-of-type和：last-of-type css3 sele構建函數。這應該爲您提供訪問第一個和最後的li元素，刪除其利潤率

像這樣（少）

ul#memberList { 
    li{ 
     &:first-of-type, &:last-of-type{ 
      margin-left:0; 
      margin-right:0; 
     } 
    } 
}

裁判：http://www.w3.org/TR/selectors/#first-of-type-pseudo 最後一種就是在它下面。

編輯：由於您正在銷售一個包裝清單，因此只有當您知道每行元素的數量時才能執行此操作。您可以使用第n個孩子http://www.w3.org/TR/selectors/#nth-child-pseudo或第n個http://www.w3.org/TR/selectors/#nth-of-type-pseudo選擇器。

喜歡的東西

ul#memberList { 
    li{ 
     &:nth-of-type(3n){ 
      margin-left:0; 
      margin-right:0; 
     } 
    } 
}

應採取的你需要照顧。

來源

2012-04-22 14:15:12

CSS3選擇器是緩慢的。如果你有一個可以使用的2.1選擇器，可以使用它，比如'first-child'和'last-child'。 – rcdmk 2012-04-22 15:42:52

嘿，謝謝你的回覆，但不幸的是它不起作用。查看我對其他評論的回覆。 – hlotvonen 2012-04-22 23:17:25

無可否認，我沒有看你的例子。你正在做的是渲染一個包裹列表，而CSS沒有辦法處理這個（它不知道頁面上的項目位置，只在標記內）。但是，如果每個列表只有三（3）個項目，則可以使用以下命令從每個第三個項目刪除外邊距：nth-child（3n） – 2012-04-23 18:11:53

你試過:first-child和:last-child（http://www.quirksmode.org/css/firstchild.html）

我認爲這將是這樣的：

ul#memberList { 
    li{ 
     &:first-child, &:last-child{ 
      margin-left:0; 
      margin-right:0; 
     } 
    } 
}

來源

2012-04-22 15:41:21 rcdmk

謝謝，但不幸的是它不工作。這隻會刪除第一個和最後一個列表項目的邊距。這不是我所追求的，因爲我有3列和3個以上的列表項。如果你知道我的意思，我想要得到的僅僅是列表項目的內部邊距。列表邊距和寬度都很不穩定，所以瀏覽器以不同的方式呈現寬度（例如0.7916666666666667％），導致網格不均勻。還有什麼想法？ – hlotvonen 2012-04-22 23:15:52

如何使3列嵌套列表只有內部排水溝（沒有外部邊距）？

回答

相關問題