如何让三栏嵌套列表只有内边距(没有外边距)？

Question

我在将嵌套的列表和其他所有东西排成一行时遇到了一点小问题。我为一个站点使用了semantic.gs网格：http://grrr.dontmeshwithus.com/正如你所看到的，底部的嵌套列表没有与上面的黑线或div“幻灯片”对齐。在外部列表的左侧和右侧都有一个小间隙。通过调整浏览器窗口的大小，可以更清楚地看到问题所在。

有什么技巧或方法来处理这个问题吗？我发现我可以消除这种差距的唯一方法是使用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

谢谢

Answer 1

您可以始终尝试使用:first-of-type和:last-of-type css3选择器。这将为您提供对第一个和最后一个li元素的访问权限，以删除其页边距。

像这样的东西(在更少的情况下)

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

ref：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;
        }
    }
}

应该能满足你的需要。

Answer 2

您尝试过:first-child和:last-child(http://www.quirksmode.org/css/firstchild.html)吗

我认为应该是这样的：

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