whitespace - 带有相邻选择器的空白

  显示原文与译文双语对照的内容
0 0

我有一系列复选框和标签。 取决于行项目宽度和容器包装,复选框可以能会在上一行上结束,标签从 2nd 行开始。 我希望这不会发生,而是使用标签的复选框到下一行。

我试图使用 ~ 选择器,可以通过这种方式引用标签,然而输入不会影响换行。


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

Whitespace nowrap not functioning as desired

http://jsfiddle.net/rd1hqjsq/

时间: 原作者:

0 0

你可能希望在 li 项上使用 inline-block 而不是 inline 来显示属性:

元素生成一个 block 元素框,它将随周围内容流动,就好像它是一个 inline 框( 就像一个被替换的元素) 。


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,那么你可以在项目之间生成一个可以能需要删除的white-space 。 阅读本文了解更多信息:

内联块元素之间的战斗空间

原作者:
...