在html中的表格行中对齐单选选项的问题答案

【问题标题】：Problems in aligning radio options within a table row in html在html中的表格行中对齐单选选项的问题
【发布时间】：2014-08-24 04:59:32
【问题描述】：

我有用于输入用户详细信息的示例 html 页面，其代码如下

<html>
<style type="text/css">
    .menuOff {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
    }   
</style>
<body>
    <table>
            <tr id="NAME">
            <td><B><span class="menuOff">Name</span> </B>
            </td>
            <td><input type="text" name='name' id='name' value="">
            </td>
            </tr>
            <tr id="EMAIL">
                <td><B><span class="menuOff">Email Address</span> </B>
                </td>
                <td><input type="text" name='email' id='email' value=''>
                </td>
            </tr>
            <tr id="COUNTRY">
                <td><B><span class="menuOff">Location</span> </B>
                </td>
                <td><input type="radio" value="1" name="location" id="usa"><span
                class="menuOff">USA</span>
                </td>
                <td><input type="radio" value="2" name="location" id="canada"><span
                class="menuOff">Canada</span>
                </td>
                <td><input type="radio" value="0" name="location" id="india"><span
                class="menuOff">India</span></td>
            </tr>
            <tr id="ADDRESS">
                <td><B><span class="menuOff">Address:</span> </B></td>
                <td><input type="text" name="address" id="address" autocomplete="off"/></td>
            </tr>
    </table>
</body>
</html>

现在我在对齐单选块时遇到问题。如屏幕截图所示，第二个单选按钮似乎远离第一个单选按钮，我无法弄清楚原因。所以有人请解释对齐问题背后的原因以及我如何才能正确对齐单选选项行？

PS：我知道这可以通过包含 td 标签的 table 或 div 块来解决，但我想要一个解决方案。

【问题讨论】：

为什么不把所有的单选按钮放在一个 td 中？
@jacelysh：好的，谢谢.. 我没有想到.. 现在，为什么当我有不同的 td 时它会出现对齐问题？
@jacelysh：我应该怎么做才能让它在不同的 tds 中并正确对齐？

标签： html css radio-button html-table

【解决方案1】：

你可以用我用过的段落标签来做到这一点。这是您可以使用的代码。

 <p style="margin-left:21em;" >
 <input type="radio" value="1" name="location" id="usa">USA
 <input type="radio" value="2" name="location" id="canada">Canada
 </p>

【讨论】：

【解决方案2】：

表格列使用其他列的最小宽度作为其宽度。（不知道具体怎么写）

您的第一个收音机占用了输入列的宽度。

在这里查看解决方案

<td>
     <input type="radio" value="1" name="location" id="usa"><span class="menuOff">USA</span>
     <input type="radio" value="2" name="location" id="canada"><spanclass="menuOff">Canada</span>
     <input type="radio" value="0" name="location" id="india"><span class="menuOff">India</span>
</td>

http://jsfiddle.net/fhHgX/

【讨论】：