用padding与margin做多个元素的等间距分布

    这样做的好处是不管有多少个元素等间距分布，都可以直接写在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; }

 

posted @ 2015-11-30 12:38  ifIhaveWings  阅读(447)  评论(0)  编辑  收藏  举报