如何让will_paginate与一个主要取自michael hartl的rails教程的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>
导致此html(请参阅here for the html in a jsfiddle):
<div class="row">
<div class="pull-left">
<div class="pagination">
<ul>
<li class="prev previous_page disabled">
<a href="#">← Previous</a>
</li>
<li class="active">
<a href="/users?page=1&search=&utf8=%E2%9C%93" rel="start">1</a>
</li>
<li>
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">2</a>
</li>
<li>
<a href="/users?page=3&search=&utf8=%E2%9C%93">3</a>
</li>
<li>
<a href="/users?page=4&search=&utf8=%E2%9C%93">4</a>
</li>
<li class="next next_page ">
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">Next →</a>
</li>
</ul>
</div>
</div>
<div class="span4 offset4 pull-right">
<form class="navbar-search" method="get" action="/users" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
</div>
<input id="search" class="search-query span3" type="text" value="" name="search">
<input class="btn btn-primary" type="submit" value="Search">
</form>
</div>
</div>
现在您可以看到:here http://i39.tinypic.com/2res2dh.png 搜索框位于will_paginate链接上方,如何使它们彼此内联? (另外在jsfiddle中,搜索按钮不与搜索栏内联,奖励积分如果你能告诉我为什么会这样,那不会发生在我的网站上并且我复制了html)
答案 0 :(得分:1)
为什么不尝试在顶部添加一些保证金?
在搜索的div上尝试此操作:margin-top: 10px;
。
答案 1 :(得分:1)
您看到所有这些事情发生的原因是由于您正在导入的Twitter Bootstrap的CSS样式。同样的原因也解释了按钮在搜索输入后断行 - 这是由于.span4
类的设置宽度。以下是至少在视觉上为我修复它的样式:
.top-nav .span4{
width:auto;
}
.top-nav .span4 .navbar-search{
margin:20px 0;
}
这是一个JSFiddle来演示它实现了什么(注意我在包装器元素中添加了一个额外的.top-nav
类,更具体地说是使用CSS选择器定位元素。)
无论如何,祝你好运!使用CSS框架开始可能有点棘手,因为有很多预先编写的样式需要考虑。
答案 2 :(得分:0)
在视图文件中
<div class= "pull-left">
<%= will_paginate %>
</div>
我猜这个div的宽度是100%。所以请尝试在其中添加一个新类,您可以在其中定义其宽度,以便您的搜索部分排成一行。