CSS 单选按钮的文本换行不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7690065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text wrapping incorrectly for radio button
提问by Chris22
I have 2 html radio buttons (separated by <br />tags) where the text is wrapping underthe radio button instead of aligning with the left indent (due to the size it's containing div). The text wrapping is not the problem, the problem is that it is wrapping incorrectly under the radio button itself, instead of aligning with text in the line above it. I'm supposing someone styled the input tag somewhere in the cascade. I haven't done an exhaustive search of all the styles attached to this page, but shouldnt the text just automatically wrap correctly, like a bullet list?
我有 2 个 html 单选按钮（由<br />标签分隔），其中文本环绕在单选按钮下而不是与左缩进对齐（由于它包含 div 的大小）。文本换行不是问题，问题在于它在单选按钮本身下不正确地换行，而不是与其上方行中的文本对齐。我假设有人在级联中的某处设置了输入标签的样式。我还没有对附加到此页面的所有样式进行详尽的搜索，但是文本不应该像项目符号列表一样自动正确换行吗？
And if not, how would i go about fixing this? Do i need to insert a <br />tag where I want the lines to break so they will be properly aligned?
如果没有，我将如何解决这个问题？我是否需要<br />在我希望线条断开的地方插入一个标签，以便它们正确对齐？
Thanks!
谢谢！
回答by Eganr
First of all, the use of a <br />is generally not recommended, it's a lot better to try and use the marginCSS property to create space between elements.
首先，<br />一般不推荐使用 a ，尝试使用marginCSS 属性在元素之间创建空间会更好。
It's also best in this situation to use CSS to do what you want to do. This is because by default those elements won't have this kind of behaviour.
在这种情况下，最好使用 CSS 来做你想做的事情。这是因为默认情况下这些元素不会有这种行为。
In this case you would want something that looks like this:
在这种情况下，你会想要看起来像这样的东西：
<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>
And then your CSS would look like this:
然后你的 CSS 看起来像这样：
.radioLeft
{
float: left;
}
.textBlock
{
float: left;
width: 80%; //Adjust this value to fit
}
回答by Tomer Tishgarten
You can simply use CSS to force the text to wrap correctly. I'm assuming that you have a <span>tag around the text and so you can use the following to adjust its position:
您可以简单地使用 CSS 强制文本正确换行。我假设您<span>在文本周围有一个标签，因此您可以使用以下内容来调整其位置：
span {
display: block;
margin-top: -16px;
margin-left: 28px;
}
Hope that this helps! Tomer
希望这会有所帮助！托默
回答by Thomas Landauer
Answer for 2015:
Since none of the other soultions worked for me, here's how I do it:
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>
See http://jsfiddle.net/8jzss08p/
Works in: Firefox 41, Chrome 45, Internet Explorer 11
请参阅http://jsfiddle.net/8jzss08p/
适用于：Firefox 41、Chrome 45、Internet Explorer 11
回答by davewoodhall
Sorry for answering this so late, I just came across this post, here's another solution :
抱歉这么晚才回答这个问题，我刚看到这篇文章，这是另一个解决方案：
p { margin-left: 20px; text-indent: -20px; }
