1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>一淘九宫格的面试题</title> 6 </head> 7 <style> 8 *{ margin:0; padding:0;} 9 .box,.box2{ width:190px; margin:100px auto;} 10 /*----------------float：left--------------------*/ 11 .box li{ float:left; list-style:none;} 12 .box li a{ float:left; border:5px solid blue; width:50px; height:50px; margin-left:-5px; margin-top:-5px; position:relative;} 13 .box li a:hover{ border:5px solid red; z-index:2; } 14 /*-----------采用display：inline-block-------------*/ 15 .box2{ clear:both; padding-top:100px;font-size:0;} 16 .box2 li{ display:inline-block; *display:inline; *zoom:1;} 17 .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;} 18 .box2 li a:hover{ border:5px solid red; z-index:2; } 19 </style> 20 <body> 21 <div class="box"> 22 <ul> 23 <li><a href="#">1</a></li> 24 <li><a href="#">2</a></li> 25 <li><a href="#">3</a></li> 26 <li><a href="#">4</a></li> 27 <li><a href="#">5</a></li> 28 <li><a href="#">6</a></li> 29 <li><a href="#">7</a></li> 30 <li><a href="#">8</a></li> 31 <li><a href="#">9</a></li> 32 </ul> 33 </div> 34 <div class="box2"> 35 <ul> 36 <li><a href="#">1</a></li> 37 <li><a href="#">2</a></li> 38 <li><a href="#">3</a></li> 39 <li><a href="#">4</a></li> 40 <li><a href="#">5</a></li> 41 <li><a href="#">6</a></li> 42 <li><a href="#">7</a></li> 43 <li><a href="#">8</a></li> 44 <li><a href="#">9</a></li> 45 </ul> 46 </div> 47 </body> 48 </html>