Question

我正在使用将在我的ruby on rails app上分页。我以前在其他应用程序上使用过它并且它工作正常然而当我在这个上使用它时出于某种原因它看起来像分页的标签被逆转了。

这是html

<div class="container">
 <br />
 <br />
 <h2 class="black">
Recent News
<div class="line_section"><div>
 </h2>
 <div class="row"> 
<div class="span12">

<ul class="recent-news"> 

<% @news_all.each do |news| %>

 <li style="font-size: 16px; line-height: 19px; letter-spacing: 1px; font-size: 14px;  color: #555; text-align: left;">
  <%= image_tag news.photo.url, class: 'pull-left', style: 'margin-right:40px; margin-top: 2px; width: 300px;' %> 
  <div style=" width: 600px; float: right;">
   <%= link_to news.title, news %> 
  <br />

   <%= link_to news.date, news, style: 'font-size: 10px; color: black; position: relative; top: 15px;' %> 

   <br /><br />
  <%= truncate news.content, length: 500 %> 
   <br />  
    <%= link_to 'Read More...', news, style: 'font-size: 12px !important;' %>
  </div>
      </li>
      <% end %> 

     <%= will_paginate @news_all %>
        </div><!-- end span12 -->


    </div><!-- end row -->
          </div><!-- end container -->

这是控制器

     def batnews
      @article = Article.first
      @news_all = News.all
      @news_all = News.paginate(page: params[:page]).limit(4)
      @comments = Comment.all
    end

这是该网站的链接，因此您可以看到实际发生的情况。

http://www.batman-fansite.com/batnews

如果你滚动到底部，你会看到分页。

Answer 1

修复你的css：

.recent-news li {
   float: right;
}

添加类似

的内容

.recent-news .pagination li {
   float: left;
}

Answer 2

这里有两个问题：

显示顺序不正确，因为CSS浮动：右边，导致元素按顺序向右移动，从而导致从左到右的向后顺序。
在分页中使用限制（4）与分页上的per_page：4选项。

检查你的CSS，你会发现：

.recent-news li {
  float: right;
}

...您的控制器代码应为：

 @news_all = News.paginate(page: params[:page], per_page: 4)

Answer 3

尝试这样的事情：

def index

@posts = Post.paginate :page => params[:page], **:order => "created_at ASC"**
end

will_paginate逆转出来

3 个答案: