Question

对单选按钮有疑问。下面有一个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%;
}

Answer 1

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

Answer 2

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

.replytd
{
float:left;
}

Answer 3

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

令人遗憾的是，更正确的方法是使用<label>元素，该元素可以被屏幕阅读器等正确识别并用于其语义目的。标签元素可以隐式（没有for属性）与输入相关联，如

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

Answer 4

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

如何显示单选按钮旁边的文字？

4 个答案: