Question

让我说我有这个

<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选择器定位其中一列？

Answer 1

截至目前，无法使用纯css定位第n列。

Answer 2

使用nth-child selector等this

ul li:nth-child(1) {
  text-align: right;
}
ul li:nth-child(2) {
  text-align: left;
}

Answer 3

目前尚不清楚是否要对齐整个列或内部元素。

如果你想要第一个，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;
}

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

此解决方案有2个问题。

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

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

demo

更好的演示

dynamic demo

Answer 4

您可以使用column-gap执行您想要的操作，但由于无法使用calc(100% - liWidth * colCount)作为column-count的值，您现在必须立即使用某些JavaScript / p>

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

Demo

使用此方法，您可以拥有所需的text-align，而不会弄乱其他对齐属性

定位第n列（由列数计算）

4 个答案: