Question

我正在进行分页，证明它有点挑战性。基本上，分页有一个前一个链接，页面（1,2,3,4）和下一个链接。前一个和下一个链接都有背景图像（方向箭头）。

E.g < Previous Page 1|2|3|4 Next >

我能够获得上一个链接和方向箭头，它是位于上方的背景图像，但不能对下一个链接执行相同操作。

<div class="pagination">
    <ul>
        <li class="pager-prev"><a href="#">Previous</a></li>
        <li>Page<a href="#" class="active">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="pager-next"><a href="#" >Next</a></li>                          
     </ul>
</div> 

#content div.pagination { 
background: red;
border: 1px solid #3d373b;
float: left;
clear: both;
width: 100%;
margin: 5px 0;
padding: 2px 0;
}
#content div.pagination ul li {
float: left;
color: #dcd7d3;
position: relative; 
}
#content div.pagination ul li a {
margin:0 2px 0;
color: #dcd7d3;
text-decoration: underline;
}
#content div.pagination ul li a.active {
text-decoration: none;
font-weight: bold;  
} 
#content div.pagination ul li.pager-prev {
margin: 0 200px 0 0;
background: url("../images/prev.gif") no-repeat;
}
#content div.pagination ul li.pager-next {
    margin: 0 250px 0 0;
    background: url("../images/next.gif") no-repeat;
}
#content div.pagination ul li.pager-prev a {
padding: 0 0 0 20px;    
}

Answer 1

很可能因为您的路径错误而无法找到您的图片：

background: url("../image/next.gif") no-repeat;

应该是

background: url("../images/next.gif") no-repeat;

看起来你拼错了images目录名

Answer 2

好吧，要使“下一个”链接与“上一个”链接保持一致，只需添加填充，然后将背景定位到右上角而不是默认的左上角。

#content div.pagination ul li.pager-next {
    ...
    ...
    background-position: right top;
}
#content div.pagination ul li.pager-next a {
    padding-right: 20px;
}

无法弄清楚分页的下一个环节

2 个答案: