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/

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

谢谢！

4

8 回答 8

34

这似乎有效：

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

我给了label18pxmargin-left的 amargin-left和 -18px 的复选框 a。

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

于 2013-02-05T23:06:21.320 回答
12

我喜欢这个 ...

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;
}
于 2017-01-30T18:44:09.357 回答
5

一种选择是这样的。

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

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

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

然后可以更轻松地进行造型。

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

但无论哪种方式都行得通。

于 2013-02-05T19:05:15.457 回答
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>

于 2018-03-07T11:47:26.457 回答
4

最简单的选择

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;
}
于 2020-10-16T09:28:32.520 回答
1

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

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

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

并且您仅将 CSS 设置float:left为checkboxesand 以防止文本环绕您可以简单地overflow:hidden在span.

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

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

于 2019-09-19T09:07:57.727 回答
0

这是另一种选择。它非常简单但有效。你接受包装的部分。<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/我想这就是你想要的？让我知道。

于 2013-02-05T19:31:11.477 回答
0

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

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

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

于 2020-12-17T20:15:49.447 回答