如何在单选按钮本身下方对齐单选按钮的文本

Question

我想有五个相邻的单选按钮，并且每个人的文本都在其按钮下方居中。它看起来应该像这样：

     *     *     *     *     *
   Text1 Text2 Text3 Text4 Text5

任何帮助，将不胜感激。

Answer 1

好吧，如果您尝试使用它会有所帮助，但是这就是我要做的方式：http : //jsfiddle.net/ZAfTy/2/

<div>
    <label><input type="radio" name="radioset" />title 1</label>
    <label><input type="radio" name="radioset" />title 2</label>
    <label><input type="radio" name="radioset" />title 3</label>
    <label><input type="radio" name="radioset" />title 4</label>
    <label><input type="radio" name="radioset" />title 5</label>
</div>

CSS：

input[type=radio] {
    display: block;
    margin: 0 auto;
}
label {
    display: inline-block;
}

基本上，单选按钮占据父对象的整个宽度，并且标签彼此对齐inline-block。