我有 2 个 html 单选按钮（由 <br /> 标记分隔），其中文本包裹在单选按钮 下方，而不是与左缩进对齐（由于它包含 div 的大小）。文本换行不是问题，问题在于它在单选按钮本身下方错误地换行，而不是与其上方行中的文本对齐。我假设有人在级联中的某处设置了输入标签的样式。我还没有对附加到这个页面的所有样式进行详尽的搜索，但是文本不应该像项目符号列表那样自动正确换行吗？
如果没有，我将如何解决这个问题？我是否需要在我想要换行的地方插入一个<br /> 标签，以便它们正确对齐？
谢谢！
【问题讨论】：
标签： css input radio-button alignment
首先，一般不推荐使用<br />，最好尝试使用margin CSS 属性在元素之间创建空间。
在这种情况下，最好使用 CSS 来做您想做的事情。这是因为默认情况下这些元素不会有这种行为。
在这种情况下，您需要如下所示：
<div style="width:300px">
<input type="radio" class="radioLeft" />
<div class="textBlock">
Some text that is too long to fit inline and must be broken
up over multiple lines.Some text that is too long to fit inline
and must be broken up over multiple lines.Some text that is too
long to fit inline and must be broken up over multiple lines.
</div>
<div style="clear:both;"></div> //this is important for repeated inputs
</div>
然后您的 CSS 将如下所示：
.radioLeft
{
float: left;
}
.textBlock
{
float: left;
width: 80%; //Adjust this value to fit
}
【讨论】：
.textblock 类的宽度更小？我在我的代码中添加了一个 jsfiddle（上图）。
.f_course .award form label { color: #000000; font-size: 11px; line-height: 1.5; position: relative; margin-left: 30px; display: block; } .f_course .award form input { float: left; display: block;
<label for="inputID" class="textBlock"> 而不是通用的 div。这将允许屏幕阅读器用户将信息与输入相关联，并为鼠标用户提供一个不错的大点击目标（他们可以点击标签，而不必点击小单选按钮。）
您可以简单地使用 CSS 来强制文本正确换行。我假设您在文本周围有一个<span> 标签，因此您可以使用以下内容来调整其位置：
span {
display: block;
margin-top: -16px;
margin-left: 28px;
}
希望这会有所帮助！ 托默
【讨论】：
抱歉这么晚才回答，我才看到这个帖子，这里有另一个解决方案：
p { margin-left: 20px; text-indent: -20px; }
【讨论】：
2015 年的答案：
由于没有其他的灵魂对我有用，我是这样做的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radiobutton labels aligned</title>
<style type="text/css">
div { display:table-row; }
div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */
div label { display:table-cell; }
</style>
</head>
<body>
<form>
<div>
<span><input type="radio" id="a"></span>
<label for="a">First button's label<br>First button's label</label>
</div>
<div>
<span><input type="radio" id="b"></span>
<label for="b">Second button's label</label>
</div>
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label>
</form>
</body>
</html>
见http://jsfiddle.net/8jzss08p/
适用于：Firefox 41、Chrome 45、Internet Explorer 11
【讨论】：