Html 如何对齐单选按钮'；按钮下的文本

我希望有五个单选按钮彼此相邻，并且每个按钮下的文本居中。应该是这样的：

     *     *     *     *     *
   Text1 Text2 Text3 Text4 Text5

任何帮助都将不胜感激。

css代码

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

tr{text align:center}

和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>

选项A

选项B

选项C

好吧，如果你玩转它会有帮助，但我会这样做：

---

基本上，单选按钮占据了父级的整个宽度，标签相互对齐。

既然有人已经推荐了一个表，我想我可以提供一些其他的东西：

CSS:

HTML:

文本1
文本2
文本3
文本4
文本5

---

现在，如果您单击标签上的任何位置，收音机将激活更多类似的按钮。

这里是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>

---

您可以在这里进行测试：

不应该使用表格来布置比我更重要的东西！尽管要确保在

display:inline块中包含IE7及其以下的回填@plantheidea除非他特别需要IE7，否则没有意义哈哈。没有必要支持IE7，除非它是必要的。嗯，为什么不呢，因为它很简单，不会影响其他任何东西？当你可以的时候，你必须抓住那个低垂的果实；）首先，WindowsXP很快就会被弃用，它至少应该包括IE7，我认为IE8。但同时，根据W3C的人口统计，IE7占据了用户总数的惊人的.4%。支持IE7的工作远远超出了它的价值。是的，这很容易，但总的来说，IE7是不值得的，而且绝对不值得。
input[type=radio] {
    display: block;
    margin: 0 auto;
}
label {
    display: inline-block;
}

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

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

.radioLabel * {
    display:block;
}

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

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

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