2

我试图使用 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 用于所有标记。

我试过在谷歌的元素工具中玩耍并添加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>
4

2 回答 2

4

display: inline;您的输入不起作用的原因是因为 simple_form 默认情况下会在每个输入周围包装一个 div 标签。有两种方法可以解决此问题：

  1. 为 simple_form 创建一个自定义包装器

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

  2. 将您的输入和周围的 div 都设置为 inline-block：

    .user_nav div, .user_nav input, .user_nav input[type="submit"] {

  display: inline-block;

}

虽然.user_nav input理论上 css 样式不是必需的，但它有助于指定它以防万一有其他 CSS 规则将输入设置为阻止。如果您确定输入行为正常，那么您应该能够删除上面 CSS 定义的第二部分。

于 2012-05-27T19:14:35.443 回答
1

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

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

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

于 2012-05-27T20:28:17.027 回答