Css 无法确定分页的下一个链接

Css 无法确定分页的下一个链接,css,xhtml,Css,Xhtml,我正在研究分页,它证明有点挑战性。基本上,分页有上一个链接、页面(1、2、3、4)和下一个链接。上一个链接和下一个链接都有背景图像(方向箭头) 例如 我能够得到上一个链接和方向箭头,它是上面定位的背景图像,但不能对下一个链接做同样的事情 <div class="pagination"> <ul> <li class="pager-prev"><a href="#">Previous</a></li>

我正在研究分页,它证明有点挑战性。基本上,分页有上一个链接、页面(1、2、3、4)和下一个链接。上一个链接和下一个链接都有背景图像(方向箭头)

例如<上一页1 | 2 | 3 | 4下一页>

我能够得到上一个链接和方向箭头,它是上面定位的背景图像,但不能对下一个链接做同样的事情

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

  • 页面
#content div.pagination{ 背景:红色; 边框:1px实心#3d373b; 浮动:左; 明确:两者皆有; 宽度:100%; 保证金:5px0; 填充:2px0; } #内容分区分页ul li{ 浮动:左; 颜色:#dcd7d3; 位置:相对位置; } #内容分区分页ul li a{ 边际:0 2px 0; 颜色:#dcd7d3; 文字装饰:下划线; } #内容分区分页ul li a.active{ 文字装饰:无; 字体大小:粗体; } #内容分区分页ul li.pager-prev{ 利润率:0.200px 0.0; 背景:url(“../images/prev.gif”)不重复; } #content div.pagination ul li.pager-next{ 利润率:0 250px 0 0; 背景:url(“../images/next.gif”)不重复; } #内容分区分页ul li.pager-prev a{ 填充:0 20px; }
由于路径错误,很可能找不到您的图像:

background:url(“../image/next.gif”)不重复

应该是

background:url(“../images/next.gif”)不重复

看起来您拼错了
图像
目录名

为了使“下一个”链接与“上一个”链接保持一致,只需添加填充,并将背景置于右上角,而不是默认的左上角

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

您是否尝试使用firebug并检查是否找到了图像(要执行此操作,请滚动css中的url,或者您可以使用httpfox)