单选按钮，未与标签垂直排列的复选框（Rails 3）

Question

我一直在寻找这个问题的现有答案，但还没有找到。我目前正在开发一个 Rails 3 项目，其中一些表单分别具有单选按钮和复选框的多项选择/多项选择问题。我使用表单生成器样式，如下所示：

<%= form_for [@profile,@answer], :method => 'put', :url => { :action => 'update' }  do |f| %>
            <% if @options.nil? %>
                <%= @error_message %>
            <% else %>
                <% @options.each do |option| %>
                    <label for="<%= 'answer_response_' + option.downcase.gsub(' ','_') %>"><%= f.radio_button :response, option %><%= option %></label>                     
                <% end %>
            <% end %>
            <div id="comments_area">
                <p>Do you have any additional comments?</p>
                <%= f.text_area :comments, :cols => 90, :rows => 5 %>
            </div>
            <%= submit_tag("Previous") %>
            <%= submit_tag("Next") %>               
        <% end %>

@options 只是一个字符串数组，表示要显示的每个选项。

标签工作完美，附在各自的单选按钮/复选框上。但是，无论我做什么，标签的文本似乎总是出现在下一行。示例：

Describe yourself:
[]
Short
[]
Fun
[]
Bored

我已经尝试过在 f.radio_button/check_box 之后使用 f.label 表单助手，它也有同样的问题。事实上，这就是我在上面做标签标签“HTML-style”的原因（不使用 ERB）。这是一个可以用 CSS 解决的样式问题吗？如果是这样，如何将标签文本放在相应复选框/单选按钮之后的同一行？

Answer 1

为了完整起见，这是如何使用内联样式解决多行问题（使用 haml）

= f.check_box :eula_accepted
= f.label :eula_accepted, "I accept the EULA", :style => "display:inline"

Answer 2

这可能是 CSS 问题，但更可能是因为您将单选按钮放置在标签内，而它应该放在标签之前或之后。

尝试将两者分开。如果这不会改变结果，请查看输入宽度 - 如果您的输入设置为覆盖整行，则会将文本推送到下一行。要更改对齐方式，您还可以查看 CSS 关键字“inline”、“float”和可能的“vertical-align”。获取 Firefox 的 Web Developer 扩展还可以帮助您弄清楚 CSS 发生了什么，例如。 G。一个元素占用了多少空间。