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

在单选按钮上有问题。得到了下面的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%; 
}

来源

2012-05-28 user1394925

，你可以在你的CSS代码改变对“格”的显示模式

.replytd 
{ 
float:left; 
}

来源

2012-05-28 01:05:29

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

来源

2012-05-28 01:01:40 Ian

white-space:nowraphelps补充这一点，但可能是轻微的矫枉过正，因为只需设置一个列的宽度将工作

那令人伤心的是，更正确的方法是使用屏幕阅读器等正确识别的元素，并用于其语义目的。标签元件可以是隐式地（没有for属性）的输入连接的是它们的母体时，像

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

来源

2012-05-28 01:05:34

您设置max-width:15%;所以内容开始换行这是不够的，以容纳该内容。增加或删除max-width。

来源

2012-05-28 01:10:00 Helstein

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

回答

相关问题