第n个孩子漂浮在列中

时间:2012-09-28 18:48:25

标签: css css3

我在这里有这个HTML

<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">tours</a></li>
    <li><a href="#">mission</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">resources</a></li>
    <li><a href="#">explorers</a></li>
</ul>

我正在尝试前三个并将其左侧浮动,最后三个向右浮动。 我无法让它工作,它们全部对齐并且没有以正确的顺序出现。我像这样标记了CSS:

li:nth-child(-n+3) {float: left;}, 
li:nth-child(n+4) {float: right;}

我错过了什么? 谢谢!

编辑以添加html链接:HERE IS THE PAGE

2 个答案:

答案 0 :(得分:0)

我{CSS}列fiddled。这实际上非常简单:

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;

    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

基本上,您在包含列表中定义了两列,以便第一个列表项放在第一列中,其他列最终放在第二列中。默认情况下,浏览器会将列间距设置为大约1em,因此您需要将其设置为0以折叠该空间。

正如您所料,browser support for this is limited to modern browsers,例如Firefox 1.5 +,Safari 3 +,Chrome,IE10和Opera 11.1 +。

如果要调整列之间的平衡,可以使用column-break-before强制在某个元素之前进行列分隔。例如,如果您只需要第一列中的两个项目而第二列中的其余项目,则可以添加此代码段:

li:nth-child(3) {
    -moz-column-break-before: always;
    -webkit-column-break-before: always;
    column-break-before: always;
}

不幸的是,在撰写本文时,只有Safari 3 +,Chrome,IE10和Opera 11.1支持column-break-before。 Firefox尚未实现此功能。

答案 1 :(得分:0)

你确实可以使用第n个孩子。这是我最近遇到的一个例子。它设置为多个屏幕宽度并相应调整:http://codepen.io/bradfrost/full/xkcBn

它使用简单的无序列表。