现在的位置: 首页 > 综合 > 正文

块级元素不固定宽度水平居中

2013年12月28日 ⁄ 综合 ⁄ 共 631字 ⁄ 字号 评论关闭

跟后台配合做一个分页的样式,分页的html是固定生产的,如下:

<div class="cPages">
<ul>
<li class="thispage"><a href="?page=1">1</a></li>
<li class="pageitem"><a href="?page=2">2</a></li>
<li><a href="?page=2">下一页</a></li>
</ul>
</div>

 

分页必须保持水平居中,而且分页的数量不是固定的,也就是说ul的宽度不固定。ok,看了下一个项目实现,如下:

.cPages {
padding: 20px 0;
overflow: hidden;
}
.cPages ul {
float: left;
position: relative;
left: 50%;
}
.cPages li {
float: left;
position: relative;
right: 50%;
}
.cPages li a {
display: inline-block;
margin:0 2px;
height: 20px;
line-height: 20px;
border: #775107 solid 1px;
padding: 0 6px;
color: #775107;
}
.cPages li a:hover, .cPages li.thispage a {
color: #FFF;
background: #775107;
text-decoration: none;
}

具体li的right:50%是怎么实现水平居中的,现在我还没想明白。

抱歉!评论已关闭.