缩进多行标签

Question

我有以下自动生成的HTML：

http://jsfiddle.net/BrV8X/

建议的方法是使用CSS缩进标签，以便单选按钮下面有一些空格？

Answer 1

label {
    display: block;
    margin-left: 20px;
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}

这是小提琴：http://jsfiddle.net/hrfmt/。玩这些值。

修改

如果您需要支持的所有浏览器都能理解display: inline-block，请使用该代码而不是float。

Answer 2

label {
   position:relative;
   padding-left:20px;
   display:block;
}

label input[type=radio] {
   position:absolute;
   top:4px;
   left:0px;   
}

http://jsfiddle.net/BrV8X/4/

Answer 3

这是一个如何在不诉诸浮动的情况下做到这一点的例子。使用这种方法，你必须用负边距做一些魔术。

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;
}

http://jsfiddle.net/4osbp0mo/2/