关于 html：如何在单选按钮旁边显示文本？


How to display text next to radio button?

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

现在"男性"显示在单选按钮旁边，这很好，但"女性"显示在单选按钮下方。如果我使存储整个单选按钮和文本的表格更宽，则"男性"和"女性"都显示在其单选按钮下方而不是旁边。

所以我的问题是我的 css/html 代码需要更改哪些内容才能在其单选按钮旁边显示"男性"和"女性"？

下面是html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table id="replies">
<tr>
     <th colspan="2">
     Replies
     </th>
</tr>
<tr>
<td>Gender: </td>
<td align="left">
 
<input type="radio" name="reply" value="male" class="replyBtn" /><span class="replyspan">Male</span>

 
<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span>

</td>
</tr>
</table>

下面是css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#replies{
    display:inline-block;
    vertical-align:top;
    min-width:15%;
    max-width:15%;
}

#replies th{
    border-collapse:collapse;
    border:1px solid black;
}

#replies td{
    border-collapse:collapse;
    border:1px solid black;
    padding:1%;
}

我会使用

你可以在你的css代码中添加这个来改变关于"div"的显示模式

1
2
3
4
.replytd
{
float:left;
}

您设置的 max-width:15%; 不足以容纳内容，因此内容开始换行。增加或删除 max-width.

white-space:nowrap 有帮助，但可能有点矫枉过正，因为只需设置列宽即可

很遗憾，更正确的方法是使用 <label> 元素，它可以被屏幕阅读器等正确识别并服务于其语义目的。作为父元素时，标签元素可以隐式(没有 for 属性)与输入链接，例如

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