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;
}

最初の列を右に、2 番目の列を左に揃えたいのですが、CSS セレクターを使用してこれらの列の 1 つをターゲットにする方法はありますか?

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使用できないため、今すぐ JavaScript を使用する必要があります。calc(100% - liWidth * colCount)column-count

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;
}

要素の高さが同じであるという前提に基づいているため、2 列目は中央の要素から始まります。

このソリューションには 2 つの問題があります。

まず、リスト内の要素の数ごとにルールが必要になるため、書くのが面倒です。

次に、現在のバージョンの Chrome にはバグがあり、要素が正しくカウントされません (そのため、何が起こっているかを示すために余分なスタイルを追加しました)。

デモ

より良いデモ

動的デモ

于 2014-01-06T20:13:40.530 に答える