html - 如何强制复选框和文本在同一行？

Question

如何强制复选框和后面的文本出现在同一行？在下面的 HTML 中，我只想在标签和输入之间换行，而不是在输入和标签之间换行。

<p><fieldset>
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">
    <!-- depending on width, a linebreak can occur here. -->
    <label for="b">b</label>
    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

澄清一下:如果 fieldset/p 对于所有元素来说不够宽，而不是:

[] a [] b []
c [] d [] e

我要:

[] a [] b
[] c [] d
[] e

Answer 1

如果将每个项目包装在一个 div 中，它就不会中断。使用下面的链接查看我的 fiddle 。我将字段集的宽度设置为 125px，并将每个项目设置为 50px 宽。您会看到标签和复选框在新的一行上保持并排并且不会中断。

<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak can occur here. -->
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/