CSS 缩进多行标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7076890/
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
Indenting multiline labels
提问by Roberto Aloi
I have the following automatically-generated HTML:
我有以下自动生成的 HTML：
What is the advised way, using CSS, to indent the label so that there's some white space under the radio button?
使用 CSS 缩进标签以便单选按钮下有一些空白的建议方法是什么？
回答by Joseph Silber
label {
display: block;
margin-left: 20px;
}
input {
float: left;
margin-left: -20px;
margin-right: 7px;
}
Here's the fiddle: http://jsfiddle.net/hrfmt/. Play with the values.
这是小提琴：http: //jsfiddle.net/hrfmt/。玩转价值观。
EDIT:
编辑：
If all the browsers you need to support can understand display: inline-block, use that instead of float.
如果您需要支持的所有浏览器都可以理解display: inline-block，请使用它而不是float.
回答by shanethehat
label {
position:relative;
padding-left:20px;
display:block;
}
label input[type=radio] {
position:absolute;
top:4px;
left:0px;
}
回答by aross
Here's an example of how to do that without resorting to floats. You'll have to do some magic with negative margins with this approach.
这是一个如何在不求助于浮动的情况下做到这一点的示例。使用这种方法，您将不得不用负边距做一些魔术。
input {
display: inline-block;
margin-right: -100px;
/* The 2 below properties are just for "correct" vertical placement of the button. */
margin-top: 5px;
vertical-align: top;
}
label {
display: inline-block;
margin-left: 100px;
margin-right: -100px;
}
div {
/* Just some spacing between the radio buttons. */
margin-bottom: 5px;
}
