如何在單選按鈕旁邊顯示文本？

Question

在單選按鈕上有一個問題。 在下面有一個html代碼和css代碼，但是發生的是我有2個單選按鈕，每個單選按鈕旁邊都有一個文本。 第一個單選按鈕狀態為“ Male”，另一個單選按鈕狀態為“ Female”。

現在，單選按鈕旁邊顯示“男性”，這很好，但是單選按鈕下方顯示“女性”。 如果將整個單選按鈕和文本存儲在的表變寬，則“ Male”和“ Female”都顯示在其單選按鈕下方而不是旁邊。

因此，我的問題是，為了在單選按鈕旁邊顯示“男性”和“女性”，需要在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會有所幫助，但可能會有點過大，因為只需設置列寬即可

令人遺憾的是，一種更正確的方法是使用<label>元素，該元素可以被屏幕閱讀器等正確識別，並達到其語義目的。 當標簽元素成為父元素時，它們可以隱式地（沒有for屬性）與輸入鏈接，例如

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

Answer 4

您設置max-width:15%; 這不足以容納內容，因此內容開始包裝。 增加或刪除max-width 。