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

参考：http://www.w3.org/TR/selectors/#first-of-type-pseudo 最后一种类型就在它下面。

编辑：因为您要渲染一个包装列表，所以只有事先了解每行的元素数量，才能执行此操作。您可以使用nth-child http://www.w3.org/TR/selectors/#nth-child-pseudo或nth-of-type 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;
        }
    }
}

如何使3列嵌套列表只有内部排水沟（没有外边距）？

2 个答案: