单选按钮的文本换行不正确
Posted
技术标签:
【中文标题】单选按钮的文本换行不正确【英文标题】：text wrapping incorrectly for radio button 【发布时间】：2011-12-03 03:42:19 【问题描述】：我有 2 个 html 单选按钮（由 <br /> 标记分隔），其中文本包裹在单选按钮 下方，而不是与左缩进对齐（由于它包含 div 的大小）。文本换行不是问题，问题在于它在单选按钮本身下方错误地换行，而不是与其上方行中的文本对齐。我假设有人在级联中的某处设置了输入标签的样式。我还没有对附加到这个页面的所有样式进行详尽的搜索，但是文本不应该像项目符号列表那样自动正确换行吗？
如果没有，我将如何解决这个问题？我是否需要在我想要换行的地方插入一个<br /> 标签，以便它们正确对齐？
谢谢！
【问题讨论】：
你能添加一个jsFiddle 你有什么吗？或者只是添加您当前的 HTML？它会回答我的一些问题，例如：你在使用<label>吗？
这是我将尝试的解决方案：link 我不想编写一堆规则，只需修改我所拥有的......但这是一个解决方案。如果有人有更好的，请发布。谢谢。
三十点，我没有使用标签。我还不确定如何使用它。会谷歌。但我看到其他帖子使用它。 <label> 到底是做什么的？
感谢您的解释，Eganr。这对对齐文本有何帮助？我没有看到您在解决方案中使用<label>
【参考方案1】：
首先，一般不推荐使用<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
【讨论】：
Eganr，文本在单选按钮下换行。我把它放在一个 div 宽度：300px 中。但这不重要，对吧，因为.textblock 类的宽度更小？我在我的代码中添加了一个 jsfiddle（上图）。
由于某种原因，我在工作中看不到 jsfiddle，您能否粘贴代码或使用替代方法。我忘记的一件事是 radioLeft 类的结束语。我也更新了我的答案。这是我的 CSSDesk 实例：cssdesk.com/FwpGr
谢谢，伊甘。我只是试着看一下 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。这将允许屏幕阅读器用户将信息与输入相关联，并为鼠标用户提供一个不错的大点击目标（他们可以点击标签，而不必点击小单选按钮。）
我在这里***.com/q/23472949/1542290 回答了一个类似的问题，发现您的解决方案不是那么理想，应该考虑编辑【参考方案2】：
您可以简单地使用 CSS 来强制文本正确换行。我假设您在文本周围有一个<span> 标签，因此您可以使用以下内容来调整其位置：
span
display: block;
margin-top: -16px;
margin-left: 28px;
希望这会有所帮助！ 托默
【讨论】：
【参考方案3】：抱歉这么晚才回答，我才看到这个帖子，这里有另一个解决方案：
p margin-left: 20px; text-indent: -20px;
【讨论】：
【参考方案4】：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
【讨论】：
用 断线？这不是粗鲁吗？文本应该换行然后缩进。以上是关于单选按钮的文本换行不正确的主要内容，如果未能解决你的问题，请参考以下文章