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