使在同一行所有输入字段(Make all input fields on the same line

我试着用CSS来使所有的领域对我的形式显示在一行上。这是我的网页上的标题导航的一部分，所以重要的是，它显示在同一行，而不是多行。

下面是目前我标题代码。

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

所述<%= render :partial => "sessions/manager" %>部分的局部这里显示另一部分取决于用户的登录状态。

如果他们退出，然后显示登录表单，如果他们在随后登录这表明日currrent用户的电子邮件地址和signout链接。

这是我的登录表单。

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

形式利用Ajax和所有标记的simple_form宝石。

香港专业教育学院尝试在谷歌的元素工具玩耍并添加display: inline; 我所有的输入字段，但没有这样的运气。

任何人都可以帮助或点我在正确的方向？

编辑：HTML生成..

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

通过什么文件说http://twitter.github.com/bootstrap/components.html#navbar

只需添加导航栏形式的类表单和拉左或右拉

你也应该将其放在L1标签里面，因为你是把它放在一个里面UL

Answer 2:

其原因display: inline; 您输入不工作是因为simple_form默认环绕每输入一个div标签。有两种方法来解决这个问题：

创建simple_form自定义包装
https://github.com/plataformatec/simple_form#the-wrappers-api

同时设置你的投入和周围的DIV是inline-block的：

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

虽然.user_nav input CSS样式理论上不应该是必要的，它有助于以防万一指定它还有一些其他的CSS规则的地方设置输入阻拦。如果您确信输入表现正常，那么你应该能够删除上面的CSS定义的第二部分。