試圖對齊simple_form框和按鈕

我在我的rails應用程序中使用simple_form gem。在測試應用程序時，我的電腦上的一切都很正常，但在其他人看來，有時我看不到按鈕 - 它似乎隱藏在輸入框後面。試圖對齊simple_form框和按鈕

我怎樣才能讓按鈕對齊輸入框的右側？現在我已經硬編碼了這個位置，這在我的電腦上運行良好，但不是所有其他的，正如我所說的。

我認爲'浮動：正確';會做到這一點，因爲輸入框和按鈕都在父div中，但它會一直髮送到屏幕的右側。我也玩弄了'清楚：兩者'，但沒有成功。謝謝你的幫助。

這裏是我的代碼：

  <div id ='search-box'> 

    <%= simple_form_for @review, :url => search_index_path, :method => :post, :html => {} do |f| %> 

    <%= f.input :search_ids, :collection => @data, :as => :grouped_chosen, 
       :group_method => :last, :prompt => false, 
       :input_html => { :class => 'span5', :multiple => true }, 
       #:label => t('find_something.search_label'), 
       :placeholder => t('find_something.search_placeholder') %> 

    <%= f.button :submit, :value => t('find_something.button_text'), :class => 'btn-primary search-button'%> 

    <% end %> 

</div>

而且我的CSS：

#search-box { 

     .controls { 
     width:50px; 
     margin-left: 390px; 
     margin-top: 18px; 

     .control-group.grouped_chosen { 
      float: left; 
      display: inline; 
      width: 540px; 

     } 
     } 

     .search-button { 
     float: right; 
     margin-right: 473px; 
     margin-top: -43px; 
     } 

     }

來源

2013-06-12 CHarris

你可以發佈你的HTML輸出？默認情況下，這些字段將正確對齊，所以您不需要所有的浮動和邊距。

http://jsfiddle.net/gpnZS/

<div id="search-box"> 
    <form> 
     <input type="text" class="search-control" value="Search me"/> 
     <button class="submit">Submit</button> 
    </form> 
</div>

如果你需要比這更多，請查看顯示：inline-block的財產。

來源

2013-06-12 02:36:13

嗨Rob R，感謝您的提示。 '輸出HTML'是什麼意思？玩過'內嵌塊屬性'，顯示內聯和許多其他東西幾個小時，沒有運氣。最終得到它排序 - 請參閱下面的答案。 – CHarris

通過輸出HTML，我的意思是在瀏覽器中呈現的內容。你發佈的是ruby，它將解析並提供輸出HTML到瀏覽器。 –

這對我很有用，在同一行上將輸入框和按鈕分開。我從stackoverflow.com找到了上一個問題的提示。

在simple_form_for行，我改變：

:html => {} do |f|

到

:html => {:class => 'form-inline'} do |f|

所以它看起來像：

<%= simple_form_for @review, :url => search_index_path, :method => :post, :html => {:class => 'form-inline'} do |f| %> 

    <%= f.input :search_ids, :collection => @data, :as => :grouped_chosen, 
       :group_method => :last, :prompt => false, 
       :input_html => { :class => 'span5', :multiple => true }, 
       :label => false, 
       :placeholder => t('find_something.search_placeholder') %> 

    <%= f.button :submit, :value => t('find_something.button_text'), :class => 'btn-primary search-button'%> 

    <% end %> 



</div>

而且在我的CSS我把：

.form-inline div { 
display: inline-block; 
}

來源

2013-06-13 12:00:24 CHarris

試圖對齊simple_form框和按鈕

回答

相關問題