0

サインイン フォームで、フィールドを下ではなく横に並べて表示したいと考えています。

ヘッダ：

更新: このコードは現在動作します

<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
  <%= link_to "Apollo", root_path, id: "logo" %>
  <nav>
    <ul class="nav pull-right">

<%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) do |f| %>
  <input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="Email">
  <input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="Password">
  <button type="submit" class="btn btn-small btn-primary">Sign in</button>
<% end %>

</ul>
  </nav>
</div>
</div>
</header>

生成された HTML

<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
  <a href="/" id="logo">Apollo</a>
  <nav>
    <ul class="nav pull-right">

          <div class="row">
            <div class="span2 offset3">
              <form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="xmS0FBX+pX8ZzBr/yHIUNmXOQMFI4krsv3FxIl51Hjg=" /></div>

                  <input id="session_email" name="session[email]" placeholder="Email" size="30" type="text" />

                  <input id="session_password" name="session[password]" placeholder="Password" size="30" type="password" />

                  <input class="btn btn-small btn-primary" name="commit" type="submit" value="Sign in" />

</form>                </div>
          </div>
    </ul>
  </nav>
</div>
</div>
</header>

カスタム CSS.SCSS

@import "bootstrap";

/* mixins, variables, etc. */

$grayMediumLight: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}
4

2 に答える 2

3

CSS を変更します。

ビューの問題ではありません。

ブートストラップを使用しているように見えるので、クラス.form-inlineをフォームに追加します。

<%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) do |f| %>
于 2012-12-16T02:18:34.207 に答える
2

フォーム内の各input要素は、インラインまたはインライン ブロックで表示し、すべての要素が 1 行に収まるようにサイズ設定する必要があります。オーバーフローは次の行に繰り下げられます。

フォームにクラスを与えます。たとえば、inline_form.

form.inline_form input {
  display: inline-block;
  width: 80px; //small for example
}

コードを使用した例

于 2012-12-16T08:17:11.547 に答える