gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:22 25 4
gpt4 key购买 nike

我有用于输入用户详细信息的示例 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 时遇到了问题。如屏幕截图所示,第二个单选按钮似乎放置在远离第一个单选按钮的位置,我无法弄清楚原因。所以有人请解释对齐问题背后的原因enter image description here以及如何使单选选项行在我的案例中正确对齐?

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>

http://jsfiddle.net/fhHgX/

关于html - 在 html 表格行中对齐单选选项的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24547444/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com