Question

我有用于输入用户详细信息的示例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>

现在我在对齐无线电块方面遇到了问题。如屏幕截图所示，第二个单选按钮似乎远离第一个单选按钮，这是我无法弄清楚的原因。所以有人请解释对齐问题 enter image description here 背后的原因，如何在我的情况下正确对齐一行无线电选项？

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

Answer 1

表格列使用其他列的最小宽度作为宽度。（不确定如何说出来）

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

点击此处查看解决方案

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

Answer 2

您可以使用段落标记我已经使用过它。这是您可以使用它的代码。

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

在html中对齐表格行中的无线电选项时出现的问题

2 个答案: