Html 如何强制搜索框与导航按钮位于同一行（是否分页）？

我如何让will_paginate在一个rails项目上使用搜索框，该项目主要取自michael hartl的rails教程。我对rails的了解是：

<div class="row">
    <div class= "pull-left">
        <%= will_paginate  %>
    </div>
  <div class="span4 offset4 pull-right">
        <%= form_tag users_path, :method => 'get', class: "navbar-search" do %>
        <%= text_field_tag :search, params[:search], class: "search-query span3" %>
        <%= submit_tag "Search", :name => nil, class: "btn btn-primary" %>
        <% end %>
    </div>
</div>

“获取”，类：“导航栏搜索”do%>
无，类别：“btn btn主”%>

这将导致此html（请参阅）：

现在你可以看到： 搜索框位于will_paginate链接上方，如何使它们相互内联？

---

（另外，在JSFIDLE中，搜索按钮没有与搜索栏对齐，如果你能告诉我为什么会这样，你会得到额外的分数，这在我的网站上没有发生，我复制了整个html）

为什么不尝试在顶部添加一些边距

---

在搜索的div上试试这个：

margintop:10px
您看到所有这些事情发生的原因是您正在导入的Twitter引导的CSS样式。同样的原因也解释了在搜索输入后按钮断开到行的原因-这是由于
.span4
类的设置宽度造成的。以下是至少在视觉上为我修复它的样式：

.top-nav .span4{
    width:auto;
}
.top-nav .span4 .navbar-search{
    margin:20px 0;
}

下面是一个例子来演示这一点（注意，我在包装器元素中添加了一个额外的
.top nav
类，更具体地说是使用CSS选择器来定位元素）

无论如何，祝你好运！一开始使用CSS框架可能有点棘手，因为有太多预先编写的样式需要考虑。
在视图文件中

<div class= "pull-left">
        <%= will_paginate  %>
</div>



我猜这个div的宽度是100%。因此，请尝试向其中添加一个新类，您可以在其中定义其宽度，这样您的搜索部分就会排成一行。
为什么不尝试在搜索的div上添加一些边距，如
边距顶部：10px<div class= "pull-left">
        <%= will_paginate  %>
</div>