防止文本在复选框下换行答案

【问题标题】：Prevent text from wrapping under a checkbox防止文本在复选框下换行
【发布时间】：2013-01-20 19:09:35
【问题描述】：

我正在布置一组复选框，如果文本太长，我会遇到一个古老的问题，即文本在复选框下方换行。

我的 HTML：

<div class="right">
    <form id="updateProfile">
        <fieldset class="checkboxes">
            <p>4. What is your favorite type of vacation?</p>
            <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
            <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
            <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
            <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
            <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
            <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
            <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
            <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
            <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
            <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
            <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
        </fieldset>
    </form>
</div>

我的 CSS：

div.right{width:580px;}

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 33%;
}

在这里看我的小提琴：http://jsfiddle.net/fmpeyton/7WmGr/

在不同的网站上进行大量搜索后，我似乎无法找到合理的解决方案。我愿意接受有关更改我的标记/样式的建议，但我希望尽可能保持代码简洁和语义化。

谢谢！

【问题讨论】：

Basically same question，恕我直言最佳解决方案：stackoverflow.com/a/46203459/923560
@Abdull 好吧，这个问题是 7 年前提出的，所以......

标签： html css layout checkbox

【解决方案1】：

这似乎有效：

http://jsfiddle.net/7WmGr/5/

我给label 一个18px 的margin-left 和一个-18px 的margin-left 复选框。

似乎可以在 Chrome 和 IE9 中使用。

div.right {
  width: 598px;
}

form#updateProfile fieldset label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  float: left;
  width: 30%;
  margin-left: 18px;
}

form#updateProfile fieldset label input[type='checkbox'] {
  margin-left: -18px;
}

<div class="right">
  <form id="updateProfile">
    <fieldset class="checkboxes">
      <p>4. What is your favorite type of vacation?</p>
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
    </fieldset>
  </form>
</div>

【讨论】：

对于 18px，我必须将其设为 Margin-right 而不是向左；然后这会阻止文本重叠
根据developer.mozilla.org/en-US/docs/Web/HTML/Element/…将复选框嵌套在标签内的错误做法
elements such as anchors or buttons。如果您看到“Do”，您会注意到锚标记已移到标签之外。复选框仍在标签内，完全有效。

【解决方案2】：

我喜欢这个...

HTML：

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS：

input[type="checkbox"] { 
    position: absolute;
}
input[type="checkbox"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}

【讨论】：

【解决方案3】：

一个选项是这样的。

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 30%;
    padding-left: 3%;
    position: relative;
}

input {
    position: absolute;
    left: -5px;
}

在这里演示：http://jsbin.com/opoqon/1/edit

我倾向于这样做的方式不同，不是用labels包裹inputs，而是做类似的事情

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>

这样可以更轻松地进行样式设置。

这是一个例子：http://jsbin.com/otezut/1/edit

但无论哪种方式都可以。

【讨论】：

你是我的英雄！我已经尝试了无数种方法，这对我来说效果最好，最可靠！谢谢！
我错过了什么吗？第二种方法看起来非常可怕 - 一行上的复选框，另一行上的标签，一个长标签完全破坏了其余部分的流程；基本上，复选框列表可能出错的所有内容，第二个 jsbin 演示。
@Martha 考虑到这已经超过两年了，绝对应该仔细检查。现在来看，我可能会选择不同的方法。

【解决方案4】：

这是一个不太依赖输入元素大小的方法。

div {width: 12em;}

label {
  display: block;
  white-space: nowrap;
  margin: 10px;
}

label input {
  vertical-align: middle;
}

label span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  position: relative;
  top: 2px;
}

<div>

<label><input type="radio"><span>I won't wrap</span></label>
<label><input type="checkbox"><span>I won't wrap</span></label>

<label><input type="radio"><span>I am a long label which will wrap</span></label>
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label>

</div>

【讨论】：

最简洁的答案，其中包含一个包含输入和跨度的标签。很酷的使用空格换行来达到效果。

【解决方案5】：

最简单的选择

HTML：

<form id="updateProfile">
    <fieldset class="checkboxes">
        <p>4. What is your favorite type of vacation?</p>
        <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
        <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
        <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
        <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
        <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
        <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
        <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
        <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
        <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
        <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
        <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
    </fieldset>
</form>

CSS：

label {
    display:flex;
    align-items: baseline;
}

input[type=checkbox] {
    margin-right: 8px;
}

【讨论】：

这很好，虽然我发现 align-items: center 在将复选框与文本对齐方面效果更好。

【解决方案6】：

我尝试了所有选项，最佳解决方案是：

<div>
  <label><input type="checkbox"><span>Text</span></label>
  <label><input type="checkbox"><span>Text</span></label>
</div>

建议使用像 Pudica 和 Fillip 这样的 HTML。

您只需将float:left 设置为checkboxes 并防止文本环绕复选框，您只需在span 上使用overflow:hidden。

[type="checkbox] {
   float: left;
}
span {
   overflow: hidden;
}

您可以使用margin-left 在文本和复选框之间提供所需的空间。

【讨论】：

【解决方案7】：

这是另一种选择。它非常简单但有效。你接受包装的部分。 <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> 并添加一个带类的跨度。我称这个类为antiWrap。然后你使用 css 为它添加一个左边距。 .antiWrap { margin-left: 18px; } 这是基于使用您的代码的 myfiddle。 http://jsfiddle.net/alexhram/7WmGr/3/我想这就是你想要的？告诉我。

【讨论】：

@mookamafoob 嵌套inputin a label不会改变布局，因为label不会在屏幕上呈现任何内容。但是，根据 w3schools.com 上的示例，您应该只将这种情况下的选项文本“历史和教育旅行”放在 label 中。这足以添加这种效果。
感谢您的建议。我正在尝试查看是否有一种方法可以应用适用于所有情况的样式，而无需添加额外的标记。

【解决方案8】：

在这种情况下，最简单的解决方案是使用表格进行布局。与其摆弄一千种可能的 CSS 排列，因为据说表格是邪恶的，这只是 100% 的时间。

<table>
  <tr>
    <td><input type=checkbox id=blah><label ='blah'></label></td>
    <td><label for='blah'>Long label here...</td>
   </tr>
</table>

如果您需要在复选框旁边添加一个标签用于样式设置，那么只需在此处使用一个空标签标签，然后在第二个表格单元格中使用真实标签。（是的，您可以为同一个复选框使用多个标签）

【讨论】：