Question

我在视图中有以下代码：

<%= simple_form_for :phrase do |f| %>
      <%= f.input :phrase, label: 'Phrase you would like to add:' %>
      <%= f.input :emotion, collection: [[true, 'Positive'], [false, 'Negative']], as: :radio_buttons, label: 'Emotion', label_method: :last %>
      <%= f.input :category, collection: @categories, as: :radio_buttons, label: 'Categories', label_method: :last %>
      <%= f.hidden_field :comment_id, :value => @comment.id %>
      <%= f.button :submit, 'Add to Dictionary' %>
<% end %>

问题在于f.input :emotion和f.input :category行。这两个都产生单选按钮，但在每种情况下，单选按钮实际上略高于后面的文本。就提交选项而言，表单正常工作，但按钮没有与它们旁边的文本对齐。

有关如何清理这些按钮或让这些按钮与各自的选项保持一致的任何建议吗？

Answer 1

尝试将item_wrapper_class: 'inline'添加到input。

<%= f.input :emotion, collection: [[true, 'Positive'], [false, 'Negative']], as: :radio_buttons, label: 'Emotion', label_method: :last, item_wrapper_class: 'inline' %>

Answer 2

试试这个：

<%= f.collection_radio_buttons :emotion, [[true, 'Positive'], [false, 'Negative']], :first, :last, label: 'Emotion' %>

simple_form单选按钮未正确对齐

2 个答案: