入力テキストと送信ボタンを同じ行に表示

Question

入力テキストフィールドとsumitボタンを同じ行に配置する必要があります。私はたくさんのことを試みたが、何も働かなかった。

形式：

<%= form_tag("/recherche", :method => "get") do %> 
    <%= search_field_tag :recherche, params[:recherche] %> 
    <%= submit_tag "Recherche", :name => nil, :id => "submit"%> 
<% end %> 

生成：

<form accept-charset="UTF-8" action="/recherche" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> 
    <input id="recherche" name="recherche" type="search" /> 
    <input id="submit" type="submit" value="Recherche" /> 
</form> 

私は

FYIなど、私はフロート、ディスプレイで試してみました...使用するためにどのようなCSS見当がつかない、フォームは<li>に包まれています。私は、彼らが同じ行にすでにあると思います

Answer 1

コメントでは、jQuery Mobileを使用していることを追加します。これは問題の原因と思われるので、明らかな解決方法は使用をやめることです。しかし何らかの理由でそれが必要な場合は、フォームフィールドの幅にどのように影響するかを調べてください。 input要素の幅はどれくらいですか？それを小さく設定する必要があります。

<style> 
#recherche { width: 15em; } 
</style> 

Answer 2

は、以下を参照してください。あなたのinputタグにdisplay: inlineまたはdisplay: inline-blockを追加する必要があります

http://jsfiddle.net/hhzFd/

Answer 3

。最も簡単な方法は、あなたがそれを改善する必要があるかもしれません。これは、すべての入力にinlineを適用します

input { 
    display: inline; 
} 

このCSSスタイルを追加することです。