0

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

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

我想'浮动：对;' 会这样做，因为输入框和按钮位于父 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;
      }

      }
4

2 回答 2

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;
 }
于 2013-06-13T12:00:24.010 回答
0

你能发布你的输出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 属性。

于 2013-06-12T02:36:13.167 回答