排列表:
<style type="text/css">
.clear{zoom:1;}
.clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
.main{width:550px;margin:0 auto;background:#EEE;padding:10px 0 30px 0;}
.main ul{background:#eaee89;margin-right:-50px;_position:relative;}
.main li{float:left;width:98px;height:98px;margin:20px 50px 0 0;background:#9aa1cc;border:1px dashed #000;_display:inline;}
</style>
<div class="main">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
效果图:
九宫格:
<style type="text/css">
.clear{zoom:1;}
.clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
.main{width:180px;margin:0 auto;padding:30px 0;background:#EEE;}
.main a{float:left;width:50px;height:50px;border:1px solid #84b4d2;color:#666;text-align:center;font:12px/50px Arial;margin:0 -1px -1px 0;position:relative;}
.main a:hover{border-color:#F00;z-index:1;}
</style>
</head>
<body>
<div class="main">
<div class="clear">
<a href="javascript:void(0)">1</a>
<a href="javascript:void(0)">2</a>
<a href="javascript:void(0)">3</a>
<a href="javascript:void(0)">4</a>
<a href="javascript:void(0)">5</a>
<a href="javascript:void(0)">6</a>
<a href="javascript:void(0)">7</a>
<a href="javascript:void(0)">8</a>
<a href="javascript:void(0)">9</a>
</div>
</div>
如图:
