使在同一行上的所有输入字段字段

2023-09-10 18:14:43 作者:起风的早晨

我试着用CSS来让所有的字段我的形式显示在一行上。这是在我的网页的标题导航的一部分,因此,重要的是它显示在一行上,而不是多行

下面是我的头code的时刻。

 < D​​IV CLASS =导航栏导航栏固定顶>
  < D​​IV CLASS =导航栏,内部>
      < D​​IV CLASS =容器>
      <一类=BTN BTN-导航栏数据目标=数据切换=崩溃&GT导航崩溃。
        <跨度类=我吧>< / SPAN>
        <跨度类=我吧>< / SPAN>
        <跨度类=我吧>< / SPAN>
      &所述; / a取代;
      <一类=品牌的href =/>蒂尼< / A>
      < D​​IV CLASS =集装箱导航崩溃>
        < UL类=导航>
            <李><%=的link_to客户,客户端/客户%>< /李>
            <李><%=的link_to乔布斯,/作业%>< /李>
        < / UL>
        < UL类=user_nav>
                <%=渲染:部分=> 会话/经理%>
            < / UL>
      < / DIV><! - 。/ NAV崩溃 - >
    < / DIV>
  < / DIV>
< / DIV>
 

<%=渲染:部分=> 会话/经理%> 部分指向一个部分而里显示根据用户的登录状态

另一部分。 excel把相同字段的行续到同一行

如果他们被注销,那么它显示的登录表单,如果他们登录的话,就说明日currrent用户的电子邮件地址和signout链接。

下面是我的登录表单。

 <%= simple_form_for(用户,:URL => user_session_path,:HTML => {:ID =>中sign_in:类=>表格内联'}:远程=>真,:格式=>:JSON)并| F | %>
    <%= f.input:电子邮件:占位符=> 电子邮件%>
    <%= f.input:密码:占位符=> 密码%GT;
    <%= f.submit登录%>
    <%=的link_to忘记密码?,new_password_path(用户)%>
  <%结束%GT;
 

的形式使用AJAX和simple_form创业板所有的标记。

香港专业教育学院尝试在谷歌的元素工具玩弄和添加显示:内联; 来我所有的输入域,但没有这样的运气

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

编辑:HTML生成。

 < UL类=user_nav>
                  <形式接收字符集=utf-8行动=/用户/ sign_in级=simple_form形式的内联数据远程=真正的ID =sign_in方法=邮报的novalidate =NOVALIDATE >< D​​IV的风格=保证金:0;填充:0;显示:内联><输入名称=UTF8类型=隐藏值=&放大器;#x2713; /><输入名称=authenticity_token类型=隐藏值=fN0oKIlpnhS0WLZpKQafln + 182IT1ONVuDP0eRtT8fg =/>< / DIV>
    < D​​IV CLASS =控制组需要通过电子邮件将><标签类=所需的邮件控制标签为=USER_EMAIL><简称标题=需要> *< /简称>电子邮件和LT; /标签>< D​​IV CLASS =控制><输入类=所需的字符串emailID =USER_EMAILNAME =用户[电邮]占位符=电子邮件大小=50型= 电子邮件/>< / DIV>< / DIV>
    < D​​IV CLASS =需要控制组密码><标签类=所需的密码控制标签为=USER_PASSWORD><简称标题=需要> *< /简称>密码< /标签>< D​​IV CLASS =控制><输入类=需要密码ID =USER_PASSWORDNAME =用户[密码]占位符=密码大小=50型=密码/>< / DIV>< / DIV>
    <输入名称=提交类型=提交值=登陆/>
    < A HREF =/用户/密码/新>忘记了密码LT; / A>
  < /形式GT;

            < / UL>
 

解决方案

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

只需添加导航栏,表类,表单和上拉左或右拉

此外,你应该把它放在一个李标签内,因为你是把它放在一个UL

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>

解决方案

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