带有相邻选择器的空白

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;
}

Fiddle: http://jsfiddle.net/rd1hqjsq/

Answer 1

您可能希望使用 inline-block 而不是 inline 来显示 li 项上的属性：

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

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

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

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

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

带有相邻选择器的空白

Whitespace with adjacent selectors

css

whitespace

Fighting Space Between Inline-block elements