Question

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

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

布局如下（每个元素都在一个新行中）：

单选按钮
男
单选按钮
女

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

Answer 1

试试这个

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

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

点击文字＆＃39;男＆＃39;或者＆＃39;女性＆＃39;应检查收音机，而不是点击收音机本身。这也将照顾到这一点。

Answer 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 %>

在按钮旁边放置单选按钮的标签

2 个答案: