html - Nowrap/不要在输入后换行

Question

如果我有几个输入( radio 或选项)后跟它们的标签，都在同一行。我是如何做到的，这样它就不会在 radio 后断线，而是在标签后如果需要断线。

<input type="radio" id="i1"/><label for="i1">First radio</label>
<input type="radio" id="i2"/><label for="i2">Second radio</label>
<input type="radio" id="i3"/><label for="i3">Third radio</label>

我可以考虑用 nowrap 将 input 和 label 包装在一个 span 中，但想知道是否有另一种方式。

Answer 1

这应该可以解决问题:

#MyDiv {width: 250px;}

<div id="MyDiv">
    <nobr><input type="radio" id="i1"/><label for="i1">First radio</label></nobr>
    <nobr><input type="radio" id="i2"/><label for="i2">Second radio</label></nobr>
    <nobr><input type="radio" id="i3"/><label for="i3">Third radio</label></nobr>
</div>

<nobr>标签将确保按钮和标签之间不会发生中断。

CSS方式也是可以的，用另一个<span>包裹起来并使用 white-space: nowrap;应该可以正常工作。