如何在html中显示两个相邻的单选按钮？答案

【问题标题】：How to show two radio button next to each other in html?如何在html中显示两个相邻的单选按钮？
【发布时间】：2014-03-16 05:42:56
【问题描述】：

我有这样的 html 表单，如 jsfiddle 所示。

如果您单击PROCESS 按钮，它将显示一个包含两个单选按钮的表单。现在它们都是垂直出现的，这意味着女性单选按钮位于男性单选按钮下方。

我试图将它们排成一行 - 意思是 Male 单选按钮，然后在男性旁边，我需要 Female 单选按钮，一切都是水平的。但不知何故，它对我不起作用。

但w3schools 中的相同示例可以正常工作。

我想使用我目前使用的相同设计。我在上面的 jsfiddle 中做错了什么吗？

【问题讨论】：

【解决方案1】：

将form input, form button#submit { 更改为#submit {

您的 display:block 规则正在应用于所有输入元素，您不想在其中包含无线电输入。

【讨论】：

最好从小提琴中删除display: inline-block; :)
@HashemQolami - 在这种情况下并没有真正的区别。
当然，只是说。因为在这种情况下它是多余的。
@j08691：它工作得很好，但是看看这个jsfiddle，我只是通过添加一个文本框来修改你的。现在一切都是水平的。我只想让单选按钮水平，其他的东西应该是垂直的。意思是两个单选按钮水平，然后是底部的文本框。这可能吗..我应该在问题中提供这个。对此感到抱歉..
好吧，既然您要更改示例，一个简单的解决方法是改用新规则 input[type="radio"] {display:inline; }。 jsFiddle example

【解决方案2】：

你会使用：

form input[type="radio"] {
  display: inline-block;    
}

目前您将其显示为块行元素（与提交一起），因此它出现在下方。

【讨论】：

【解决方案3】：

 form button#submit 
{
display: inline;
margin: 4px;
 }

将样式更改为上述。

【讨论】：