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

【问题标题】：How to display text next to radio button?如何在单选按钮旁边显示文本？
【发布时间】：2012-05-28 00:51:50
【问题描述】：

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

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

所以我的问题是我的 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代码：

#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%;
}

【问题讨论】：

标签： html css

【解决方案1】：

我会使用<label> 标记而不是<span> 标记，因为它们与<input> 元素具有更好的可访问性和相关性。

【讨论】：

【解决方案2】：

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

.replytd
{
float:left;
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：