将单选按钮的标签放在按钮旁边答案

【问题标题】：Place radio button's label next to the button将单选按钮的标签放在按钮旁边
【发布时间】：2016-07-03 20:44:40
【问题描述】：

我的视图中有以下单选按钮：

  <%= f.label :gender %>
  <%= f.radio_button :gender, true %> Male
  <%= f.radio_button :gender, false %> Female

布局看起来像这样（每个元素都在一个新行中）：

单选按钮
男
单选按钮
女性

如何使上述每个元素在同一行中彼此相邻显示？

【问题讨论】：

我认为这可能很大程度上取决于您使用的 css 框架，恕我直言
我正在使用引导程序

标签： css ruby-on-rails ruby-on-rails-4

【解决方案1】：

试试这个

<%= label_tag 'male' do %>
  <%= f.radio_button :gender, true %>
  Male
<% end %>

<%= label_tag 'female' do %>
  <%= f.radio_button :gender, false %>
  Female
<% end %>

当您单击文本“男性”或“女性”时，应选中收音机，而不是单击收音机本身。这也会解决这个问题。

【讨论】：

谢谢！这会导致标签出现在单选按钮下方。我希望标签位于按钮的右侧。

【解决方案2】：

就像@kumar 提到的那样，您应该可以这样做：

<%= label_tag 'male', class: 'radio-inline' do %>
  <%= f.radio_button :gender, true %>
  Male
<% end %>

<%= label_tag 'female', class: 'radio-inline' do %>
  <%= f.radio_button :gender, false %>
  Female
<% end %>

您还应该查看collection_radio_buttons，我想您也应该可以使用它，虽然不完全确定：

<%= f.collection_radio_buttons :gender, [['male', true], ['female', false]], :last, :first %>

【讨论】：