如何强制复选框和文本在同一行？答案

【问题标题】：How to force a checkbox and text on the same line?如何强制复选框和文本在同一行？
【发布时间】：2012-05-06 08:37:00
【问题描述】：

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

【问题讨论】：

为什么不把 div 放在它们之间？
我不知道，你能澄清一下你的意思吗？
如果我写了一段，例如<p>Hi my name is Andreas</p>，我不会手动将换行符放在那里，而是希望浏览器这样做。不过，我不希望浏览器在Andreas 的中间插入换行符，这是我在这里试图阻止的。也就是说，我不知道复选框标签对的数量或换行符的位置。

标签： html

【解决方案1】：

如果您将每个项目包装在一个 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/

【讨论】：

试着让你的标签比单个字母大！它不适用于更长的标签。

【解决方案2】：

试试这个 CSS：

label {
  display: inline-block;
}

【讨论】：

复选框和标签之间仍会出现换行符。我将编辑我的问题以澄清。
将每个复选框和标签对包装在一个设置有显示的 div 中：inline-block
IE7 不支持 inline-block
@Brent：如果您的回答反映了您的评论，我会投票赞成。事实上，孤立的答案是不正确的。但如果有人按照您在评论中的建议进行操作。

【解决方案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>

【讨论】：

'white-space: nowrap' 是我一直在寻找的技巧。谢谢。

【解决方案4】：

另一种单独使用 css 的方法：

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

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

【讨论】：

【解决方案5】：

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

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

这对我有用。

【讨论】：

【解决方案6】：

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

【讨论】：

假设我事先知道 p/fieldset 的大小和标签的长度。
@Andreas 说点极端的，名字可能是“john winston ono lennon”，很长……那你想做什么？您可以创建一个在 x 字符之后包装的函数，例如：“john winston o....”
单个复选框标签对将始终适合。我现在用布伦特的评论解决了这个问题。