在下面的代码中,#option_one_div
和 #option_two_div
中,当 label
的内容超出一行时,移动到下一行,在单选按钮下。我想要的是他们应该留在上一行的 label
文本下。
我该怎么做?
我试图将 label
包含在 span
标签中,但这没有帮助。我不能将 label
包含在 div
元素中,因为 div
是一个 block
级别的元素,所以整个 label
会落到下一行。我该怎么办。
<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>
最佳答案
您有几个选择:
- 将表格放入表格中
- 使用
display: table-row
和display: table-cell
模拟表格 - 设置输入和标签元素的宽度并将它们 float 在 div 中
- 设置输入和标签元素的宽度并使用
display: inline-block
关于html - 如何让一个label的内容在落到下一行的时候留在父元素下面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25485423/