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/

经过不同网站的搜索，我似乎找不到合理的解决方案。我愿意接受有关更改标记/样式的建议，但我希望尽可能保持代码的清晰和语义。

谢谢！

Answer 1

这似乎有效：

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

我给了label {18}的margin-left和{18}的margin-left复选框。

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

似乎在Crome＆amp; amp; IE9。

Answer 2

一种选择就是这样。

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

但无论哪种方式都可行。

Answer 3

我喜欢这个......

HTML：

UIGraphicsBeginImageContext(size)

CSS：

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

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

这是另一种选择。它非常简单而有效。你采取了包装的部分。 <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label>并添加一个类的范围。我打电话给类反包。然后你用css为它添加一个左边距。 .antiWrap { margin-left: 18px; }这是使用您的代码的myfiddle。 http://jsfiddle.net/alexhram/7WmGr/3/我认为那是你的目标？让我知道。

Answer 6

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

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

建议使用类似Pudica和Fillip的HTML。

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

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

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

Answer 7

最简单的选项

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

Answer 8

在这种情况下，最简单的解决方案是使用表格进行布局。并不是因为据说表格是邪恶的，而是摆弄了1000种不同的CSS排列，但这只是100％的时间有效。

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

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

防止文本在复选框下包装

8 个答案: