一个分页

一个分页

如上图所示的分页,其结构如下:

<div class="pagenavi">
<ul>
<li><a href="" title="">1/18</a></li>
<li><a href="" title="">上一页</a></li>
<li><a href="" title="">1</a></li>
<li><a href="" title="">2</a></li>
<li><a href="" title="">3</a></li>
<li><a href="" title="">...</a></li>
<li><a href="" title="">18</a></li>
<li><a href="" title="">下一页</a></li>
</ul>
</div>

在这个结构中,“.pagenavi”是外部框架,100%宽度。而目的,是为了让“.pagenavi”下的“ul”块能够居中显示。可是因为“ul”块中的节点“li”并不固定且为块元素,所以无法确认其父层最终宽度。我们知道一般情况下要让元素居中,直接给宽度和“margin: 0 auto”就行了。但在这里无法确定其宽度,所以这时这种方法就行不通了。

解决方案一:相对浮动

“.pagenavi ul” 向左浮动50%,是以外层“.pagenavi”的宽度为标准的;子节点“li”向右浮动50%,是以层“ul”的宽度为标准的,这里无需定义内层的宽度。这样算是一个小技巧,让“ul”居中了。也补足了float没有center属性的缺陷。

.pagenavi ul{ float: left;
left: 50%;
position: relative;
}
.pagenavi li{
float: left;
position: relative;
right: 50%;
}

解决方案二:display:inline-block

.pagenavi li{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}*/

Demo