ラジオボタン、チェックボックスがラベル付きで縦に並んでいない（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フォームヘルパーを使用してみましたが、それは同じ問題を抱えています。実際、これが（ERBを使用していない）上記のラベル・タグ「HTMLスタイル」を行っている理由です。これはCSSで解決できるスタイリングの問題ですか？もしそうなら、どうすればそれぞれのチェックボックス/ラジオボタンの後に同じ行にラベルテキストを置くことができますか？

Answer 1

これはCSSの問題である可能性がありますが、その前または後にラベルの内側にラジオボタンを配置したことが原因です。

2つを分離してみてください。これで結果が変わらない場合は、入力幅を調べます。入力が行全体をカバーするように設定されている場合、テキストが次の行にプッシュされます。アラインメントを変更するには、CSSキーワード "inline"、 "float"、場合によっては "vertical-align"を調べることもできます。 FirefoxのWeb Developer拡張機能を入手することで、CSSで何が起こっているのかを把握することもできます。 g。要素がどれくらいのスペースを取っているか。完全ために、これは（HAMLを使用して）インラインスタイルで複数行の懸念を解決する方法です

Answer 2

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