7

假设我有这个

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>


ul {
   column-count: 2;
}

我想将第一列向右对齐，第二列向左对齐，有没有办法使用 css 选择器来定位其中一个列？

4

4 回答 4

8

到目前为止，没有办法用纯 css 来定位第 n 列。

于 2014-01-20T15:48:01.480 回答
0

像这样使用第 n 个子选择器

ul li:nth-child(1) {
  text-align: right;
}
ul li:nth-child(2) {
  text-align: left;
}
于 2014-01-06T17:53:03.983 回答
0

你可以column-gap用来做你想做的事，但由于不能calc(100% - liWidth * colCount)用作 的值column-count，你现在必须使用一些 javascript

function calcGap() {
    var gap = window.innerWidth - (columnCount * listWidth) + "px";
    ul.style.webkitColumnGap = gap;
    ul.style.columnGap = gap;
}
calcGap(); // Fire on load
window.onresize = calcGap; // Fire on window resize

演示

使用这种方法，您可以拥有任何text-align您想要的东西，并且不会弄乱其他对齐属性

于 2014-01-06T18:45:07.227 回答
0

不清楚是要对齐整列还是里面的元素。

如果你想要第一个，Zach Saucier 的答案就是这样。

如果是后者，并且您想要一个仅 CSS 的解决方案，它会是这样的：

.container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
}

li {
    text-align: right;

}

li:nth-last-child(6) ~ li:nth-child(n+4) {
    text-align: left;
    background-color: lightblue;
}
li:nth-last-child(8) ~ li:nth-child(n+5) {
    text-align: left;
    background-color: lightblue;
}

li:nth-child(n+4) {
    color: red;
}

li:nth-last-child(6) {
    border: solid 1px green;
}

它基于元素将具有相同高度的假设，因此第二列将从中间元素开始。

这个解决方案有两个问题。

首先，编写起来很麻烦，因为您需要为列表中的每个元素数量制定规则。

其次，它在当前版本的 Chrome 中有一个错误，它不能正确计算元素（这就是为什么我添加了额外的样式来显示正在发生的事情）

演示

更好的演示

动态演示

于 2014-01-06T20:13:40.530 回答