我有用于输入用户详细信息的示例 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>
现在我在对齐单选 block 时遇到了问题。如屏幕截图所示，第二个单选按钮似乎放置在远离第一个单选按钮的位置，我无法弄清楚原因。所以有人请解释对齐问题背后的原因
以及如何使单选选项行在我的案例中正确对齐？
PS:我知道这可以通过包含 td 标签的表格或 div block 来解决，但我想要一个除此之外的解决方案。
最佳答案
表格列使用其他列的最小宽度作为其宽度。 (不知 Prop 体怎么说)
您的第一个 radio 占据了输入列的宽度。
在这里查看解决方案
<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>
关于html - 在 html 表格行中对齐单选选项的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24547444/