0

有一个关于单选按钮的问题。下面有一个 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%;
}
4

4 回答 4

2

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

于 2012-05-28T01:01:40.623 回答
1

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

.replytd
{
float:left;
}
于 2012-05-28T01:05:29.037 回答
0

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

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

<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>
于 2012-05-28T01:05:34.543 回答
0

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

于 2012-05-28T01:10:00.210 回答