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

我一直在寻找这个问题的现有答案，但还没有找到答案。我目前正在开发一个Rails 3项目，其中一些表单分别具有单选按钮和复选框的多选/多选问题。我使用表单生成的风格，像这样：单选按钮，复选框没有与标签垂直排列（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风格”（不使用ERB）。这是一个可以用CSS解决的样式问题吗？如果是这样，我怎样才能将标签文本放在相应的复选框/单选按钮后面的同一行上？

来源

2012-04-01 spanport

这可能是一个CSS问题，但更有可能是因为您在单元内部放置了单选按钮，应该在之前或之后。

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

来源

2012-04-01 20:54:01 Sprachprofi

会试试看，谢谢！ – spanport 2012-04-01 20:58:18

找到了！我使用的是引导框架，它的标签是“display：block”，导致它们占据了整条线。我将其改为内联，一切都很好。非常感谢！ – spanport 2012-04-01 21:18:22

为了完整性，这是怎么了（使用HAML），以解决内嵌样式多关注

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

来源

2012-05-01 13:42:05 crftr

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

回答

相关问题