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> </td> |
下面是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{ #replies td{ |
我会使用
你可以在你的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>
|
来源:https://www.codenong.com/10778323/