<div class="pagelist_b">
<div class="page">
<span class="totlerecord">5</span>
<span class="totlepages">1/5</span>
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">></a>
</div>
</div>
在这个结构中,“.pagelist_b”是外部框架,100%宽度。而目的,是为了让“.page”块能够居中显示。可是因为“.page”块中的节点并不固定,无法确认其最终宽度,再者,“.page”块中的内容需要定义特殊的样式,而被附上“display:block;”属于将其块元素化,而导致“.page”中的内容无法完美的居中。
这两天突然无意中看到网上的相关文章,想起了position:relative;(相对浮动)的玩法。大致非常通俗的说明一下这里的思路:“.page”向右浮动50%,是以外层“.pagelist_b”的宽度为标准的;内层(如A,SPAN)向左浮动50%,是以层“.page”的宽度为标准的,这里无需定义内层的宽度。这样算是一个小技巧,让“.page”居中了。也补足了float没有center属性的缺陷。如果无法正常显示,记得在page_b加多一句overflow:visible;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<title> new document </title>
<meta name="robots" content="all" />
<meta name="generator" content="editplus" />
<meta name="author" content="hayden@yeah.net,hayden" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" rev="stylesheet" href="" type="text/css" media="all" />
<script type="text/javascript" src=""></script>
<style type="text/css">
* { word-wrap: break-word; margin: 0; padding: 0;}
.pagelist_b {width:100%;height:80px;text-align: center; }
.page {position:relative;left:50%;float:left;}
.page span {position:relative;left:-50%;border: 1px solid #ddd;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}
.page span.totlerecord{}
.page span.current{cursor:pointer;}
.page a:link,.page a:visited {border: 1px solid #ccc;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;text-decoration: none;position:relative;left:-50%;color:#666}
.page a:hover {border:1px solid #666;}
</style>
</head>
<body>
<div class="pagelist_b">
<div class="page">
<span class="totlerecord">5</span>
<span class="totlepages">1/5</span>
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">></a>
</div>
</div>
</body>
</html>
转载于 http://www.mysuc.com/article/DIV&CSS/kuandu-DIV-float-fudong-juzhong.htm