点击文本以选择相应的单选按钮
点击文本以选择相应的单选按钮的问题是由于label标签没有正确使用造成的。每个答案选项的文本应该被包裹在label标签中,并且每个label标签应该是唯一的。
要解决这个问题,我们需要将label标签正确地放置在每个答案选项的周围,并为每个label标签提供一个唯一的标识符。下面是一个示例代码,展示了如何修复这个问题:
Abe Andrew Alice
在上面的示例中,每个答案选项被包裹在自己的label标签中,并且每个label标签都有一个唯一的id属性。这样一来,当用户点击文本时,相应的单选按钮就会被选中。
请注意,name属性用于将单选按钮分组在一起,以便用户只能选择其中一个选项。因此,在上面的示例中,所有的单选按钮都具有相同的name属性值。
点击文本以选择相应的单选按钮有一个小的不可点击空间,这是根据Nathan的回答进行操作的原因。下面是如何使它们无缝连接的方法(参见此文章):
我更喜欢这个答案。但是你确定在这种方法中甚至需要“for”属性吗?
:我想你是对的,所以我更新了我的答案。谢谢!
另一个避免单选按钮和标签之间额外空间的选择是根本不放置它:<input id="349" type="radio" value="1" name="question1"><label for="349">Abe</label>
(标签之间没有空格或换行符)
:你的解决方案在Firefox中不起作用,而我的解决方案可以。
我刚在Chrome和Firefox中测试了我的方法,并发现通过删除空格字符,将不可点击空间从7像素减少到3像素。请参见此链接。剩下的三个像素是单选按钮默认的右边距margin: 3px 3px 0 5px;
(在Firefox中更为明显,因为默认情况下有悬停效果),可以通过使用CSS删除边距并替换为内边距来修复。
:我明白了,感谢你的调查!尽管为了简单起见,我将坚持将整个内容包含在标签中。
请给我您的电子邮件地址或任何其他联系方式,关于我的问题。