html - 如何让一个label的内容在落到下一行的时候留在父元素下面？

Question

在下面的代码中，#option_one_div 和 #option_two_div 中，当 label 的内容超出一行时，移动到下一行，在单选按钮下。我想要的是他们应该留在上一行的 label 文本下。

我该怎么做？

我试图将 label 包含在 span 标签中，但这没有帮助。我不能将 label 包含在 div 元素中，因为 div 是一个 block 级别的元素，所以整个 label 会落到下一行。我该怎么办。

JSFiddle here.

<div style="padding:25px; width:400px;">
        <div style="background-color:#bf5b5b; ">
            <label style="margin-left:25px; margin-right:25px;">Yes</label>
            <label style="margin-left:25px; margin-right:25px;">No</label>
            <label style="margin-left:25px; margin-right:25px;"></label>
        </div>
        <div id="option_one_div" style="background-color:#74d4dd;">
            <input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="0">
            <input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="1">
            <label style="margin-left:25px; margin-right:25px;" for="option_one_div">Label of first group of Radio Buttons radio buttons.</label>
        </div>
        <div id="option_two_div" style="background-color:#36d666;">
            <input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="0">
            <input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="1">
            <label style="margin-left:25px; margin-right:25px;" for="option_two_div">Label of second group of Radio Buttons radio buttons.</label>
        </div>
    </div>

Answer 1

您有几个选择:

• 将表格放入表格中
• 使用display: table-row 和display: table-cell 模拟表格
• 设置输入和标签元素的宽度并将它们 float 在 div 中
• 设置输入和标签元素的宽度并使用display: inline-block