css - 将单选按钮的标签放在按钮旁边

Question

我的 View 中有以下单选按钮:

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

当您点击文本“男”或“女”时，应选中 radio 而不是单击 radio 本身。这也将解决这个问题。