如何在同一行强制使用复选框和文本？

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中包装每个项目它不会破坏.看看我的小提琴下面的链接.我将字段集的宽度设为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/

Answer 2

试试这个CSS:

label {
  display: inline-block;
}

Answer 3

试试这个.以下将checkbox和label视为唯一元素:

<style>
  .item {white-space: nowrap;display:inline  }
</style>
<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">aaaaaaaaaaaa aaaa a a a a a a aaaaaaaaaaaaa</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak NEVER occurs here. -->
    <label for="b">bbbbbbbbbbbb bbbbbbbbbbbbbbbbb  b b b b  bb</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">ccccc c c c c ccccccccccccccc  cccc</label>
</div>
</fieldset>

Answer 4

另一种方法是单独使用css:

input[type='checkbox'] {
  float: left;
  width: 20px;
}
input[type='checkbox'] + label {
  display: block;
  width: 30px;
}

请注意,这会强制将每个复选框及其标签放在一个单独的行上,而不是仅在出现溢出时才这样做.

Answer 5

You can wrap the label around the input:

 **<label for="a"><input type="checkbox" id="a">a</label>**

This worked for me.