單選按鈕，複選框沒有與標籤垂直排列（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）

回答

相關問題