Question

I need to put the input text field and the sumit button on the same line. I tried a lot things, but nothing worked.

The form:

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

Which produces:

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

I have no idea what CSS to use… I tried with float, display, etc.

FYI, the form is wrapped in a <li>.

Answer 1

In comments, you add that you are using jQuery Mobile. This appears to be the cause of the problem, so the apparent solution would be to stop using it. But if you need it for some reason, check out how it affects your form field widths. How wide is is the input element? You may need to set it smaller, e.g.

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