沃梦达 / 编程技术 / 前端开发 / 正文

关于 html：如何在单选按钮旁边显示文本？

沃梦达教程前端开发

2022-09-21

How to display text next to radio button?有一个关于单选按钮的问题。下面有一个 html 代码和 css 代码，但发生的是我有 2 个单选按钮，每个单选按钮旁边都...

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

<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span>

</td>
</tr>
</table>

下面是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{
border-collapse:collapse;
border:1px solid black;
}

#replies td{
border-collapse:collapse;
border:1px solid black;
padding:1%;
}

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

你可以在你的css代码中添加这个来改变关于"div"的显示模式

1
2
3
4

.replytd
{
float:left;
}

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

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

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