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

我希望它全部显示在一行中。它目前在其自己的行上与搜索栏一起呈现，其他链接在其下方。当我检查表单元素时，它似乎占据了整个页面宽度。我尝试将表单标签包装在一个 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>

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