<!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=gb2312" />
<title>一淘九宫格的面试题</title>
</head>
<style>
*{ margin:0; padding:0;}
.box,.box2{ width:190px; margin:100px auto;}
/*----------------float：left--------------------*/
.box li{ float:left; list-style:none;}
.box li a{ float:left; border:5px solid blue; width:50px; height:50px; margin-left:-5px; margin-top:-5px; position:relative;}
.box li a:hover{ border:5px solid red; z-index:2; }
/*-----------采用display：inline-block-------------*/
.box2{ clear:both; padding-top:100px;font-size:0;}
.box2 li{ display:inline-block; *display:inline; *zoom:1;}
.box2 li a{ display:inline-block; border:5px solid blue; width:50px; height:50px; margin-left:-5px; margin-top:-5px; position:relative; font-size:12px;}
.box2 li a:hover{ border:5px solid red; z-index:2; }
</style>
<body>
<div class="box">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>
<div class="box2">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/jdsm/p/3522021.html