使在同一行上的所有输入字段 [英] Make all input fields on the same line

查看：145
本文介绍了使在同一行上的所有输入字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

下面是我的头code的时刻。

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

在＆LT;％=渲染：部分=＆GT; 会话/经理％＆GT; 部分指向一个部分而里显示根据用户的登录状态

另一部分。

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

下面是我的登录表单。

 ＆LT;％= simple_form_for（用户，：URL =＆GT; user_session_path，：HTML =＆GT; {：ID =＆gt;中sign_in：类=＆GT;表格内联'}：远程=＆GT;真，：格式=＆GT;：JSON）并| F | ％＆GT;
    ＆LT;％= f.input：电子邮件：占位符=＆GT; 电子邮件％＆GT;
    ＆LT;％= f.input：密码：占位符=＆GT; 密码％GT;
    ＆LT;％= f.submit登录％＆GT;
    ＆LT;％=的link_to忘记密码？，new_password_path（用户）％＆GT;
  ＆LT;％结束％GT;

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

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

。

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

编辑：HTML生成。

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

            ＆LT; / UL＆GT;

解决方案

通过什么文件说 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

这篇关于使在同一行上的所有输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆