1

我这里有这个 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 链接:这里是页面

4

2 回答 2

0

摆弄了一下 CSS3 列。实际上,这非常简单:

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

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

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

正如您所料,浏览器对此的支持仅限于现代浏览器,例如 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 尚未实现此功能。

于 2012-09-28T19:19:00.487 回答
0

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

它使用一个简单的无序列表。

于 2014-05-01T15:21:34.353 回答