Question

如果我有几个输入（无线电或选项），后跟标签，则全部在同一行。如何制作它以便它不会在收音机后断线，但在标签后打破如果需要。

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

我可以考虑将input和label包裹在span nowrap中，但想知道是否还有另一种方法。

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;应该可以正常工作。

Answer 2

我认为这正是您所寻找的：http://jsfiddle.net/catalinred/kNUaz/

Answer 3

对我来说没有任何作用（或者至少我是这么认为的，直到我修复它）... 因此，我的脏解决方案是使用表，1行，多列。您可能需要调整填充/间距。

编辑：警告这是一种糟糕的做事方式，但如果没有任何效果，可能有所帮助。

                        <table border="0"  >
                            <tbody>
                            <tr>
                                <td><input name="gender" type="radio" value="male" checked> Male </td>
                                <td><input name="gender" type="radio" value="female"> Female </td>
                            </tr>
                            </tbody>
                        </table>

Nowrap /输入后不要断行

3 个答案: