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

试试这个。以下内容将复选框和标签视为唯一元素：

<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

http://jsbin.com/etozop/2/edit

put a div wrapper with WIDTH :

  <p><fieldset style="width:60px;">
   <div style="border:solid 1px red;width:80px;">
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">

    <label for="b">b</label>
   </div>

    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

一个名字可能是“john winston ono lennon”这很长......所以你想做什么？（你永远不知道长度）...你可以制作一个函数，在x chars之后包裹：“john winston o ....”

Answer 6

您可以将标签包裹在输入周围：

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

这对我有用。

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

6 个答案: