50

如何强制复选框和以下文本出现在同一行？在下面的 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
4

6 回答 6

40

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

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

于 2012-05-06T10:42:01.987 回答
32

试试这个 CSS：

label {
  display: inline-block;
}
于 2012-05-06T08:39:45.337 回答
22

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

<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>
于 2012-11-13T11:15:06.673 回答
8

仅使用 css 执行此操作的另一种方法：

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

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

于 2015-07-02T02:33:54.617 回答
4

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

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

这对我有用。

于 2019-11-18T18:02:10.627 回答
0

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 字符之后包装的函数，例如：“john winston o....”

于 2012-05-06T08:48:21.377 回答