Rails形成内联

Question

我在像这样的rails项目中有一个导航栏

<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>

我希望它能在一行中显示出来。它当前使用搜索栏在其自己的行上呈现，其下方的其他链接位于其下方。当我检查表单元素时，它似乎占据了整个页面宽度。我已尝试将表单标记包装在一个带有display: inline的div中并手动设置其宽度但不起作用。我如何强迫他们出现在同一条线上？

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>

在这种情况下，您不希望在标记的末尾添加|。 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; }