將無序列表項中的前兩個元素內聯對齊，其餘每行對齊

Question

所以我有這個列表，我試圖安排。

我想顯示前兩個<li>元素在一行（行內）和其他元素在單獨的行。

我曾嘗試添加顯示錶>表格單元格的CSS屬性到前兩個元素，但它只是將其他<li>元素縮進第二行。

有沒有更乾淨的方法呢？

<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

套用display: inline-block前兩個列表項，例如

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

作爲一個通用的解決方案：如果你需要匹配第一k列表項，選擇具有在li:nth-child(-n + k)

Codepen example

---

的形式被寫入

作爲一個方面說明，如果使用負指數對您而言並不直觀，您還可以恢復邏輯並將該屬性應用於el對此語句是不:nth-child(n + k + 1)，像這樣

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

但在我看來是不易閱讀和邏輯是相當令人費解。

Answer 2

就使前兩個li inline-block的...

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。 「檢查」和「取消」是行動...不列出項目。請參閱下面的代碼片段以獲取更多語義版本的示例。

.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>