並べ替えられていないリストアイテムの最初の2つの要素をインラインに、残りを1行に1つずつ整列させます。

Question

したがって、私はこのリストを整理しようとしています。

最初の2つの<li>要素を1行（インライン）で表示し、他の要素を別々の行に表示したいとします。

最初の2つの要素に表示表>表セルのCSSプロパティを追加しようとしましたが、他の<li>要素を2番目の行にインデントします。

よりクリーンな方法がありますか？

<ul> 
    <li> Check All </li> 
    <li> Uncheck All </li> 
    <li> Option A </li> 
    <li> Option B </li> 
    <li> Option C </li> 
    <li> Option D </li> 
    <li> Option E </li> 
    <li> Option F </li> 
    <li> Option G </li> 
</ul> 

Answer 1

例えば、最初の2つのリスト・アイテムのためdisplay: inline-blockを適用します一般的な解決策として

li:nth-child(-n + 2) { 
    display: inline-block; 
} 

は：あなたが最初 kリストの項目に一致するように必要がある場合、セレクタは li:nth-child(-n + k)

Codepen example

---

の形で書かれなければなら

補足として、負のインデックスを直感的に使用できない場合は、ロジックを元に戻してそのプロパティをelに適用することもできますそう

li:not(:nth-child(n + 3)) { 
    display: inline-block; 
} 

のように、ない:nth-child(n + k + 1)ですが、私の意見では読みにくくているとロジックはかなり複雑であるements。

Answer 2

ただ、最初の2 liインラインブロックを作る...

ul { 
 
    list-style-type: none; 
 
} 
 
li:first-child, 
 
li:nth-child(2) { 
 
    display: inline-block; 
 
}

<ul> 
 
    <li>Check All</li> 
 
    <li>Uncheck All</li> 
 
    <li>Option A</li> 
 
    <li>Option B</li> 
 
    <li>Option C</li> 
 
    <li>Option D</li> 
 
    <li>Option E</li> 
 
    <li>Option F</li> 
 
    <li>Option G</li> 
 
</ul>

Answer 3

セレクタについて:first-childおよび:nth-child(2)のセレクタについて学ぶことは役に立ちます。あなたの例を考えれば、私は単純に意味論的な方法でHTMLを手配しなかったと思います。 "Check"と "Uncheck"はリスト項目ではなくアクションです。あなたの例のより意味のあるバージョンについては、下のスニペットを参照してください。あなたは本当に異なるラッパーやクラスにそれらを分離しようと、それはセマンティックではありませんので、CSS選択のこれらの種類を行うクラスを使用してはならない

.list { 
 
    display: block; 
 
    width: 400px; 
 
    margin: 0px auto; 
 
} 
 

 
.list-header { 
 
    text-align: center; 
 
    clear: both; 
 
    line-height: 50px; 
 
    background: grey; 
 
    padding: 0px 15px; 
 
} 
 

 
.list-buttons { 
 
    vertical-align: middle; 
 
} 
 

 
.list-ul { 
 
    display: block; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background: lightgrey; 
 
} 
 

 
.list-ul-item { 
 
    display: block; 
 
    padding: 15px; 
 
    text-align: center; 
 
}

<section class="list"> 
 
    <header class="list-header"> 
 
    <div class="list-buttons"> 
 
     <button>Check All</button> 
 
     <button>Uncheck All</button> 
 
    </div> 
 
    </header> 
 
    <ul class="list-ul"> 
 
    <li class="list-ul-item"> Option A </li> 
 
    <li class="list-ul-item"> Option B </li> 
 
    <li class="list-ul-item"> Option C </li> 
 
    <li class="list-ul-item"> Option D </li> 
 
    <li class="list-ul-item"> Option E </li> 
 
    <li class="list-ul-item"> Option F </li> 
 
    <li class="list-ul-item"> Option G </li> 
 
    </ul> 
 
</section>