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。

Answer 2

css代码

 <style type="text/css">
        tr { text-align:center }
 </style>

和html代码：

 <table>
     <tr>
        <td><input type="radio" name="option_a" id="option_a"><br /><label for="option_a">Option A</label></td>
        <td><input type="radio" name="option_b" id="option_b"><br /><label for="option_b">Option B</label></td>
        <td><input type="radio" name="option_c" id="option_c"><br /><label for="option_c">Option C</label></td>
    </tr>
 </table>

Answer 3

由于有人已经推荐了一张桌子，我觉得我还会提供其他的东西：

CSS：

.radioLabel {
    display:inline-block;
    vertical-align:top;
    text-align:center;

    /* IE 7 and below */
    *display:inline;
    *zoom:1;
}

.radioLabel * {
    display:block;
}

HTML：

<label class="radioLabel">
    <input type="radio" name="radioSet" />
    <span class="radioSpan">Text1</span>
</label><label class="radioLabel">
    <input type="radio" name="radioSet" />
    <span class="radioSpan">Text2</span>
</label><label class="radioLabel">
    <input type="radio" name="radioSet" />
    <span class="radioSpan">Text3</span>
</label><label class="radioLabel">
    <input type="radio" name="radioSet" />
    <span class="radioSpan">Text4</span>
</label><label class="radioLabel">
    <input type="radio" name="radioSet" />
    <span class="radioSpan">Text5</span>
</label>

现在，如果您点击标签上的任何地方，收音机将会激活，更像按钮。

Answer 4

这是html / css示例，可以做我想要的事情。

HTML：

<form action="">
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>         
</form>

CSS：

form {
    width: 100%;
}
div.radio-box {
    width: 100px;
    display: inline-block;
    margin: 5px;
    background-color: yellow;
}
.radio-box label {
    display:block;
    width: 100px;
    text-align: center;
}
.radio-box input {
    width: 20px;
    display: block;
    margin: 0px auto;
}

您可以在此处测试：http://jsfiddle.net/E4FPu/1/

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

4 个答案: