Question

我在rails应用中使用了simple_form gem。在测试应用程序时，我的电脑上的一切看起来都很好，但在其他情况下，有时候我无法看到按钮 - 它似乎隐藏在输入框后面。

如何才能使按钮与输入框右侧对齐？现在我已经硬编码了这个位置，这在我的电脑上运行良好，但在所有其他电脑上都没有，正如我所说的那样。

我以为“漂浮：正确;＆＃39;会这样做，因为输入框和按钮在父div中，但它会一直发送到屏幕右侧。我也玩弄了两个＆＃39;明确：两个都没有成功。谢谢你的帮助。

这是我的代码：

          <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属性。

尝试对齐simple_form框和按钮

2 个答案: