0

Rails アプリで simple_form gem を使用しています。アプリをテストするとき、私の PC ではすべて問題ないように見えますが、他の PC ではボタンが表示されないことがあります。入力ボックスの後ろに隠れているようです。

ボタンが入力ボックスのすぐ右に配置されるようにするにはどうすればよいですか? 今、私は位置をハードコーディングしました。これは、私の PC ではうまく機能しますが、他のすべての PC ではそうではありません。

私は「float:right;」と思いました。入力ボックスとボタンは親 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 に答える