Css 无法确定分页的下一个链接
我正在研究分页,它证明有点挑战性。基本上,分页有上一个链接、页面(1、2、3、4)和下一个链接。上一个链接和下一个链接都有背景图像(方向箭头)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下一页>
我能够得到上一个链接和方向箭头,它是上面定位的背景图像,但不能对下一个链接做同样的事情
<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)