无序列表中的前两个元素行内对齐，其余元素每行对齐

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例子

---

作为旁注，如果使用负索引对您来说不是直观的，您也可以恢复逻辑并将该属性应用于非 :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。"选中"one_answers"取消选中"是动作……不是列表项。请参阅下面的代码片段，以获得示例的更语义化的版本。

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