使所有输入字段在同一行答案

【问题标题】：Make all input fields on the same line使所有输入字段在同一行
【发布时间】：2012-05-28 04:42:34
【问题描述】：

我正在尝试使用 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" %> 部分指向一个部分，根据用户登录状态显示另一个部分。

如果他们已注销，则会显示登录表单，如果他们已登录，则会显示当前用户的电子邮件地址和注销链接。

这是我的登录表单。

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

我尝试过使用 Google 的元素工具并将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>

【问题讨论】：

如果您发布了 Ruby 输出的实际 HTML（以及实际上应用的任何 CSS），会更有用。
HTML 表单输入在默认情况下倾向于保留在一行中，因此可能需要删除一两个 CSS 属性。您的 Ruby 代码也可能包含换行符。正如@reisio 所说，发布您的输出 HTML 和 CSS，最好在 jsfiddle.net 上发布，以便我们可以使用它。
哎呀。将生成的 HTML 添加到我的第一篇文章中。

标签： ruby-on-rails css ajax twitter-bootstrap simple-form

【解决方案1】：

您的输入上的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 定义的第二部分。

【讨论】：

谢谢！除了提交框外，所有框现在都内联显示。
也许 user_nav 的宽度不够长，无法容纳所有输入，导致最后一个输入溢出到新行？
或者，尝试将 .user_nav input[type="submit"] 放在上面的逗号分隔列表中。也许还有另一个 input[type="submit"] 样式优先于我上面定义的自定义样式。

【解决方案2】：

根据文档所说http://twitter.github.com/bootstrap/components.html#navbar

只需将 navbar-form 类添加到您的表单中，然后向左或向右拉

你也应该把它放在一个 li 标签里，因为你把它放在一个 ul 里

【讨论】：