防止文本在复选框下换行

Question

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

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

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

谢谢！

原文由 Fillip Peyton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这似乎有效：

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

我给了 label a margin-left 18px 和复选框 a margin-left -18px。

似乎适用于 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>

原文由 Fillip Peyton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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;
}

原文由 Christian Michael 发布，翻译遵循 CC BY-SA 3.0 许可协议