试图对齐simple_form框和按钮

Question

我在Rails应用程序中使用了simple_form gem。 测试该应用程序时，在我的PC上一切正常，但在其他计算机上，有时我看不到该按钮-它似乎隐藏在输入框的后面。

我怎样才能使按钮在输入框的右边对齐？ 现在，我已经对该位置进行了硬编码，正如我所说的那样，该位置在我的PC上效果很好，但在所有其他计算机上效果不佳。

我以为“浮动：正确；” 可以做到这一点，因为输入框和按钮在父div中，但是它一直将其发送到屏幕的右侧。 我还开玩笑说“ clear：both”，但没有成功。 谢谢你的帮助。

这是我的代码：

          <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;
      }

      }

Answer 1

这对我有用，在同一行上显示输入框和按钮。 我从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;
 }

Answer 2

您可以发布输出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>

如果您还需要更多，请查看display：inline-block属性。