如何在html中显示两个单选按钮？

Question

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

如果您点击PROCESS按钮，它会显示一个有两个单选按钮的表单。而且它们现在都是垂直移动的，这意味着女性单选按钮正好在男性单选按钮下面。

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

但w3schools中的相同示例效果很好。

我想使用我目前使用的相同设计。我在上面的jsfiddle中有什么不对吗？

Answer 1

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

<强> jsFiddle example

您的display:block规则适用于所有输入元素，并且您不希望在那里包含无线电输入。

Answer 2

您使用：

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

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

的 jsFiddle here.

Answer 3

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

将样式更改为上方。