Html 如何在单选按钮旁边显示文本？

我有个关于单选按钮的问题。下面有一个html代码和css代码，但是我有两个单选按钮，每个单选按钮旁边都有一个文本。第一个单选按钮显示“男性”，另一个单选按钮显示“女性”

现在单选按钮旁边显示“男性”，这很好，但单选按钮下方显示“女性”。如果我把整个单选按钮和文本存储的表格放得更宽，那么“男性”和“女性”都显示在单选按钮下面，而不是旁边

所以我的问题是，为了在单选按钮旁边显示“男”和“女”，我的css/html代码中需要更改什么

以下是html代码：

<table id="replies">
<tr>
     <th colspan="2">
     Replies
     </th>
</tr>
<tr>
<td>Gender: </td>
<td align="left">
<div class="replytd"> 
<input type="radio" name="reply" value="male" class="replyBtn" /><span class="replyspan">Male</span>
</div>
<div class="replytd"> 
<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span>
</div>
</td>
</tr>
</table>

---

我将使用标记而不是

标记，因为它们与

元素具有更好的可访问性和相关性。

我将使用标记而不是

标记，因为它们具有更好的可访问性和与

元素的相关性。

您可以将其添加到css代码中，以更改有关“div”的显示模式

---

您可以在css代码中添加此选项，以更改有关“div”的显示模式

---

空白：nowrap

但考虑到只需设置列宽就可以了，这可能有点过头了

令人遗憾的是，更正确的方法是使用一个

元素，该元素可以被屏幕阅读器等正确识别，并满足其语义目的。标签元素作为其父元素时，可以与输入隐式链接（无for属性），如

<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>

男性

空白：nowrap

但可能有点过分，因为只需设置列宽就可以了

令人遗憾的是，更正确的方法是使用一个

元素，该元素可以被屏幕阅读器等正确识别，并满足其语义目的。标签元素作为其父元素时，可以与输入隐式链接（无for属性），如

<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>

男性

您设置的

最大宽度：15%不足以容纳内容，因此内容开始包装。增加或删除您设置的
最大宽度：15%不足以容纳内容，因此内容开始包装。增加或删除
最大宽度

<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>