Css 带相邻选择器的空格

我有一个复选框和标签的列表。根据行项目宽度和容器包装，复选框可能会在前一行结束，标签从第二行开始。我不希望发生这种情况，而是将带有标签的复选框带到下一行

我尝试使用

~

选择器，我可以通过这种方式引用标签（由边框表示），但是输入不受影响，这不会阻止换行

<ul>
<li>
    <input type="checkbox" />
    <label>AAAAAA</label>
</li>
 <li>
    <input type="checkbox" />
    <label>AAAAAA</label>
</li>
...
</ul>

小提琴：

---

对于

li

项上的显示属性，您可能希望使用

inline块

而不是

inline

：

该元素生成一个块元素框，该框将与周围的内容一起流动，就像它是一个单独的内联框一样（其行为非常类似于替换的元素）

ul{list style:none；}
ul li{显示：内联块；}
ul li输入~标签{
空白：nowrap；
边框：1px实心#555；
}

AAAAA


AAAAA


AAAAA


AAAAA


AAAAA


AAAAA


AAAAA

内联块

而不是

内联块

。这很简单：）把它作为答案放进去，这样我就可以给你打分了。

ul { list-style: none; }
ul li { display: inline; }
ul li input ~ label {
  white-space: nowrap;
  border: 1px solid #555;
}