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

我的html表单如下所示

如果单击“处理”按钮，它将显示一个有两个单选按钮的表单。现在它们都是垂直排列的，这意味着女性单选按钮刚好位于男性单选按钮的下方

我试着把它们排成一行-意思是男性单选按钮，然后在男性旁边，我需要女性单选按钮，所有东西都是水平的。但不知怎么的，这对我不起作用

但同样的例子在这里也适用

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

您可以使用：

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

因为当前您将其显示为块线元素，而不是与提交一起显示，所以它出现在下面

您可以使用：

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

因为当前您将其显示为块线元素，而不是与提交一起显示，所以它出现在下面

更改表单输入，表单按钮提交{以提交{

您的显示：块规则正在应用于所有输入元素，您不想在其中包含无线电输入。

更改表单输入，表单按钮提交{to submit}{

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

您的显示：块规则正在应用于所有输入元素，您不希望在其中包含无线电输入

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

将样式更改为上面的样式

---

将样式更改为上面的样式。

最好从fiddle中删除display:inline block；：@HashemQolami-在这种情况下没有什么区别。当然，只要说in就行了。因为在这种情况下它是多余的。@j08691:它工作得很好，但看看这个，我只添加了一个文本框就修改了你的。现在一切都是水平的。@j08691:它可以了我希望只有单选按钮是水平的，其他东西应该是垂直的。这意味着两个单选按钮是水平的，然后是底部的文本框。这可能做到吗？我应该在问题中提供这一点。对此很抱歉。好吧，既然你正在更改示例，一个简单的解决方法是使用一个新规则nput[type=radio]{display:inline；}。最好从fiddle中删除display:inline block；：@HashemQolami-在这种情况下并没有什么区别。当然，只要说“in”。因为它在这种情况下是多余的。@j08691:它工作得很好，但看看这个，我只添加了一个文本框就修改了你的。现在一切都是水平的。我希望只有收音机，但是t水平，其他东西应该垂直。这意味着两个单选按钮水平，然后在底部的文本框。这可能做到吗..我应该在问题中提供这一点。对此表示抱歉..好吧，因为您正在更改示例，一个简单的解决方法是使用一个新规则，输入[type=radio]{display:inline；}。