Html 防止文本在复选框下换行

我列出了一组复选框，我遇到了一个古老的问题：如果文本太长，则在复选框下面包装文本

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

请看我的小提琴：

在不同的网站上搜索了很多之后，我似乎找不到一个合理的解决方案。我愿意听取关于更改标记/样式的建议，但我希望代码尽可能保持干净和语义

---

谢谢

一个选项是这样的

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

此处演示：

我倾向于这样做的方式是不同的，它不是用

标签包装
输入
，而是像这样做

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

滑雪旅行

这样可以更轻松地进行造型

下面是一个这样的例子：

---

但这两种方法都可行。

这是另一种选择。这是非常简单但有效的。 你拿包装的那部分<代码>历史和教育旅行，您可以添加一个带有类的跨度。我给这个班打了电话。然后使用css向其添加一个左边距，如图所示

.antiWrap{margin left:18px；}

这是基于MyFIDLE的代码。我想这就是你的目的？让我知道。

这似乎有效：

我给出了18px的

标签

a

左边距

，以及-18px的复选框a

左边距

似乎在Chrome和IE9中工作

div.right{
宽度：598px；
}
表单#updateProfile字段集标签{
显示：块；
边缘底部：5px；
字体大小：16px；
浮动：左；
宽度：30%；
左边距：18px；
}
表单#updateProfile字段集标签输入[type='checkbox']{
左边距：-18px；
}

四,。你最喜欢什么类型的假期

滑雪旅行
海滩参观
游轮
历史和教育旅行
游艇
公路旅行
温泉周末
食宿
呆在家里放松
赌博旅行
志愿者

我喜欢这个

HTML:

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

---

这里有一个不太依赖于输入元素大小的方法

div{width:12em；}
标签{
显示：块；
空白：nowrap；
利润率：10px；
}
标签输入{
垂直对齐：中间对齐；
}
标签跨度{
显示：内联块；
空白：正常；
垂直对齐：顶部；
位置：相对位置；
顶部：2个；
}

我不打包
我不打包
我是一个长标签，将包装
我是一个长标签，我将包装在输入旁边

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

正文
正文

建议使用Pudica和Fillip之类的HTML

在CSS中，您只需将

float:left

设置为

复选框

，为了防止文本环绕复选框，您只需在

span

上使用

溢出：隐藏

[type=“checkbox]{
浮动：左；
}
跨度{
溢出：隐藏；
}

---

您可以使用

左边距

在文本和复选框之间留出所需的空间。

最简单的选项

HTML:

---

在这种情况下，最简单的解决方案是使用一个表格进行布局，而不是摆弄上千种可能的css排列，因为据推测表格是邪恶的，这只会在100%的情况下起作用

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

长标签在这里。。。

---

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

标签中的
输入
不会更改布局，因为
标签
不会在屏幕上呈现任何内容。但是，在本例中，您应该只在选项文本中添加“历史和教育旅行”“根据w3schools.com上的示例，在
标签内。这足以增加这种效果。谢谢你的建议。我想看看是否有一种方法可以在不添加额外标记的情况下应用于所有情况。你是我的英雄！我已经尝试了无数种方法来做这件事，这对我来说效果最好，也最可靠！非常感谢。我错过什么了吗？第二种方法看起来绝对可怕——一行上有复选框，另一行上有标签，一个长长的标签完全破坏了其他方法的流程；基本上，第二个jsbin显示的复选框列表中可能出错的所有内容。@Martha考虑到这已经超过两年了，它肯定应该被仔细检查。现在来看，我可能会选择一种不同的方法。我必须使18px的利润率向右，而不是向左；然后，根据
元素（如锚定或按钮）
，停止文本在标签内重叠嵌套复选框。如果您看到“Do”，您会注意到锚定标记被移动到标签之外。该复选框仍然在标签内，并且完全有效。IMHO最佳解决方案：@Abdull嗯，是的，这个问题是7年前提出的，因此…最简洁的答案是有一个包装输入和跨度的标签。很酷的使用空格换行以达到效果。
input[type="checkbox"] { 
    position: absolute;
}
input[type="checkbox"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}

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

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

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

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