Rails 内联形式答案

【问题标题】：Rails form inlineRails 内联形式
【发布时间】：2013-03-08 15:50:43
【问题描述】：

我在这样的 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 中，并手动设置它的宽度，但都不起作用。如何强制他们出现在同一行？

【问题讨论】：

标签： css ruby-on-rails forms

【解决方案1】：

在您的view 中添加ul li 并添加一点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; }

【讨论】：

【解决方案2】：

试试：

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

【讨论】：