0

在将嵌套列表与其他所有内容对齐时，我遇到了一个小问题。我为一个站点使用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（/少）：

 @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

谢谢

4

2 回答 2

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 last of type 就在它下面。

编辑：由于您正在渲染一个包装列表，因此只有在您预先知道每行元素的数量时才能执行此操作。您可以使用 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;
        }
    }
}

应该照顾你的需要。

于 2012-04-22T14:15:12.877 回答
0

你试过了吗:first-child（:last-childhttp://www.quirksmode.org/css/firstchild.html）

我认为它会是这样的：

ul#memberList {
    li{
        &:first-child, &:last-child{
             margin-left:0; 
             margin-right:0;
        }
    }
}
于 2012-04-22T15:41:21.557 回答