与相邻选择器的空白

Question

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

我尝试使用~选择器，我可以用这种方式引用标签（如边框所示）但输入不受影响，不会阻止换行。

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

的CSS

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

小提琴： http://jsfiddle.net/rd1hqjsq/

Answer 1

您可能希望inline-block代替inline使用li项目的显示属性：

  

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

＆＃13;

＆＃13;

ul { list-style: none; }
ul li { display: inline-block; }

ul li input ~ label {
    white-space: nowrap;
    border: 1px solid #555;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

如果您使用inline-block，请注意在您可能需要删除的项目之间产生空格。阅读这篇文章了解更多信息：

Fighting Space Between Inline-block elements