div宽度100%，内部元素浮动，div居中 

<!DOCTYPE>   
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="utf-8" />  
<title> new document </title>   

</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>

在这个结构中，“.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>   
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="utf-8" />  
<title> new document </title>   
<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;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}  
.page span.current{cursor:pointer;}  
.page a:link,.page a:visited {border: 1px solid #ccc;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>

 

posted @ 2012-04-24 10:28  脉凌网络  阅读(682)  评论(0)  编辑  收藏  举报