css - Railsフォームインライン

Question

このようなレールプロジェクトにナビゲーションバーがあります

<nav>
    <%= link_to "Home", root_url %> |
    <%= form_tag "/posts", :method => 'get' do %>
        <%= search_field_tag 'search', nil, :placeholder => 'Find...' %>
    <% end %>
    <%= link_to "Sign Up", new_user_url %> |
    <%= link_to "Sign In", sign_in_url %>
</nav>

そして、すべてを1行で表示したいのです。現在、検索バーが独自の行に表示され、その上と下に他のリンクが表示されます。フォーム要素を調べると、ページ幅全体を占めているようです。フォーム タグを div でラップしdisplay: inlineて幅を手動で設定しようとしましたが、どちらも機能しません。それらを同じ行に強制的に表示するにはどうすればよいですか?

Answer 1

試す：

<nav>
  <div style= "display:inline">
    <%= link_to "Home", root_url %> |
  </div>

  <div style= "display:inline">
    <%= form_tag "/posts", :method => 'get' do %>
      <%= search_field_tag 'search', nil, :placeholder => 'Find...' %>
    <% end %>
  </div>

     <%= link_to "Sign Up", new_user_url %> |
     <%= link_to "Sign In", sign_in_url %>
</nav>

Answer 2

ul liあなたを追加し、次のようにview少し追加しますcss

意見：

   <nav>
      <ul>
        <li>
          <%= link_to "Home", root_url %>
        </li>
        <li>
          <%= form_tag "/posts", :method => 'get' do %>
            <%= search_field_tag 'search', nil, :placeholder => 'Find...' %>
          <% end %>
        </li>
        <li>
          <%= link_to "Sign Up", new_user_url %>
        </li>
        <li>
          <%= link_to "Sign In", sign_in_url %>
        </li>
      </ul>
    </nav>

この場合、|タグの末尾に a を追加したくありません。CSSそのことをします。これは、HTML 5 のセマンティックであり、メニューの間に仕切りを配置する適切な方法です。

CSS:

ul li {
    display: inline;
    overflow: hidden;
    float: left;
    border-right: 1px solid gray;
    padding: 0 10px;
}

li:last-child { border-right:none; }