这样做的好处是不管有多少个元素等间距分布，都可以直接写在li中，而且由于是给a设定的样式，所以在字数不一致的情况下，样式仍然是统一的。
html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 8 <script type="text/javascript" src="js/all.js"></script> 9 </head> 10 11 <body> 12 <div class="avr"> 13 <ul class="clearfix"> 14 <li class="fl"><a href="javascript:void(0);">text</a></li> 15 <li class="fl"><a href="javascript:void(0);">text text</a></li> 16 <li class="fl"><a href="javascript:void(0);">text</a></li> 17 <li class="fl"><a href="javascript:void(0);">text text text text</a></li> 18 <li class="fl"><a href="javascript:void(0);">text text</a></li> 19 <li class="fl"><a href="javascript:void(0);">text</a></li> 20 <li class="fl"><a href="javascript:void(0);">text</a></li> 21 <li class="fl"><a href="javascript:void(0);">text text</a></li> 22 <li class="fl"><a href="javascript:void(0);">text text</a></li> 23 <li class="fl"><a href="javascript:void(0);">text text</a></li> 24 <li class="fl"><a href="javascript:void(0);">text text</a></li> 25 <li class="fl"><a href="javascript:void(0);">text text</a></li> 26 <li class="fl"><a href="javascript:void(0);">text text</a></li> 27 <li class="fl"><a href="javascript:void(0);">text text</a></li> 28 <li class="fl"><a href="javascript:void(0);">text text</a></li> 29 <li class="fl"><a href="javascript:void(0);">text text</a></li> 30 <li class="fl"><a href="javascript:void(0);">text text</a></li> 31 <li class="fl"><a href="javascript:void(0);">text</a></li> 32 <li class="fl"><a href="javascript:void(0);">text text</a></li> 33 <li class="fl"><a href="javascript:void(0);">text</a></li> 34 </ul> 35 </div> 36 </body> 37 </html>
css：
1 /* 公共样式 */ 2 * { padding: 0; margin: 0; list-style: none; font-size: 14px; } 3 a { text-decoration: none; } 4 .hide { display: none; } 5 input { outline: none; } 6 .fl { float: left; } 7 .fr { float: right; } 8 .clearfix { display: block; *display: inline-block; _height: 1%; } 9 .clearfix:after { content: '20'; display: block; clear: both; height: 0; visibility: hidden; } 10 /* 用padding与margin做多个元素的等间距分布 */ 11 .avr ul li a { display: inline-block; margin: 10px 30px 0 0; padding: 0 15px; height: 30px; line-height: 30px; } 12 .avr ul li a:hover { background: #fdd; }