内联排列无序列表项中的前两个元素，其余各行对齐

Question

因此，我有此清单正在尝试安排。

我想在一行（内联）中显示前两个<li>元素，并在单独的行中显示其他元素。

我试过将display table> table-cell 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示例

---

附带说明一下，如果使用负索引对您不直观，则还可以还原逻辑并将该属性应用于不是 :nth-child(n + k + 1)的元素，如下所示

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

但我认为可读性较差，逻辑也很复杂。

Answer 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。 “检查”和“取消检查”是动作...未列出项目。 有关示例的更多语义版本，请参见下面的代码片段。

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