Make all input fields on the same line

Question

Im trying to use css to make all the fields for my form display on one line. It's part of the header nav on my page so it is important that it shows on one line instead of multiple lines.

Here's my header code at the moment.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="i-bar"></span>
        <span class="i-bar"></span>
        <span class="i-bar"></span>
      </a>
      <a class="brand" href="/">Bandini</a>
      <div class="container nav-collapse">
        <ul class="nav">
            <li><%= link_to "Clients", "/clients"  %></li>
            <li><%= link_to "Jobs", "/jobs"  %></li>
        </ul>
        <ul class="user_nav">
                <%= render :partial => "sessions/manager" %>
            </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

The <%= render :partial => "sessions/manager" %> part points to a partial which displayes another partial depending on the users login state.

If they are logged out, then it displays the login form and if they are logged in then it shows th currrent users email adress and a signout link.

Here's my login form.

<%= simple_form_for("user", :url => user_session_path, :html => {:id => "sign_in", :class => 'form-inline' }, :remote => true, :format => :json) do |f| %>
    <%= f.input :email, :placeholder => 'Email' %>
    <%= f.input :password, :placeholder => 'Password' %>
    <%= f.submit 'Login' %>
    <%= link_to "Forgot your password?", new_password_path('user') %>
  <% end %>

The form utilizes ajax and the simple_form gem for all the markup.

Ive tried playing around in Googles element tools and adding display: inline; to all of my input fields but no such luck.

Can anyone assist or point me in the right direction?

Edit: HTML generated..

            <ul class="user_nav">
                  <form accept-charset="UTF-8" action="/users/sign_in" class="simple_form form-inline" data-remote="true" id="sign_in" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="fN0oKIlpnhS0WLZpKQafln+182IT1ONVuDP0eRtT8fg=" /></div>
    <div class="control-group email required"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="user_email" name="user[email]" placeholder="Email" size="50" type="email" /></div></div>
    <div class="control-group password required"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><div class="controls"><input class="password required" id="user_password" name="user[password]" placeholder="Password" size="50" type="password" /></div></div>
    <input name="commit" type="submit" value="Login" />
    <a href="/users/password/new">Forgot your password?</a>
  </form>

            </ul>

Answer 1

By what documentation says http://twitter.github.com/bootstrap/components.html#navbar

Just add navbar-form class to your form and pull-left or pull-right

Also you should place it inside a li tag since you are placing it inside a ul

Answer 2

The reason display: inline; on your inputs is not working is because simple_form by default wraps a div tag around every input. There are two ways to fix this problem:

1. Create a custom wrapper for simple_form

   https://github.com/plataformatec/simple_form#the-wrappers-api

2. Set both your inputs and the surrounding div to be inline-block:

   .user_nav div, .user_nav input, .user_nav input[type="submit"] {
   
     display: inline-block;
   
   }
   

While the .user_nav input css style theoretically should not be necessary, it helps to specify it just in case there is some other CSS rule somewhere setting inputs to block. If you're sure that inputs are behaving normally, then you should be able to remove the second part of the CSS definition above.