CODEWITHSUNDEEP
ruby-on-railscss
Justin D.
Justin D.

Reputation: 4976

Display the input text and the submit button on the same line

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

Upvotes: 0

Views: 2369

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

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>

Upvotes: 0

Baldrick
Baldrick

Reputation: 24340

You should add the display: inline or display: inline-block to your input tags. THe simplest way is to add this css style

input {
  display: inline;
}

This will apply the inline on all inputs, you may need to refine it.

Upvotes: 1

Siwei
Siwei

Reputation: 21549

I think they are already in the same line, see:

http://jsfiddle.net/hhzFd/

Upvotes: 0

Related Questions