在一组单选按钮之间添加空格

Question

我有一组单选按钮， 现在我如何在一组单选按钮选项之间添加空格。 像这样

http://img692.imageshack.us/img692/3955/radiod.jpg

使用css

Answer 1

尝试将其放入样式表中：

input[type=radio] { margin-bottom: 15px }

当然，您可以根据需要增加15px。

Answer 2

Discodancer 提供了一个valiad答案，但请注意 IE6 不支持属性选择器（http://www.quirksmode.org/css/contents.html）并且您不需要黑客来克服此问题将类应用于单选按钮

所以你的HTML将是：

<input type="radio" name="foo" class="bar" value="lorem"> Lorem <br>
<input type="radio" name="foo" class="bar" value="ipsum"> Ipsum <br>
<input type="radio" name="foo" class="bar" value="dolor"> Dolor

CSS可以像：

input.bar { margin: 5px 0; }

Answer 3

line-height可能是您的最佳选择

Answer 4

<p class="radios">
    <label><input type="radio"> Foo</label>
    <label><input type="radio"> Bar</label>
</p>

.radios label {
    display: block;
    margin-bottom: 15px;
}

简单易用，应该适用于所有浏览器。始终对所有表单元素使用label，尤其是单选按钮和复选框，这样可以单击文本以及小按钮来选择选项。