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

用padding与margin做多个元素的等间距分布的更多相关文章

  1. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  2. HTML中行内元素的竖直方向的padding和margin是否真的无效

    参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin- ...

  3. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  4. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. 能用padding，margin解决的不要使用伪元素，能用背景解决的也不要用伪元素

    能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素

  7. 内联元素的padding和margin

    首先区分一下3类元素: 1)块级元素:div.p等这一类具有宽高属性,且单独占一行的元素: 2)占位元素:img.input这一类具有宽高属性.紧随上一个元素不单独占一行的元素: 3)内联元素:spa ...

  8. padding margin border 和元素大小

    元素占用宽度 = 元素宽度+padding+border+margin 注意margin只是隔开元素,不会使得元素变大,而padding会使得元素变大,也就是说 元素真实宽度=元素宽度+padding ...

  9. margin在块元素、内联元素中的区别 padding

    (1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(bloc ...

随机推荐

  1. Divide and Conquer:River Hopscotch(POJ 3258)

     去掉石头 题目大意:一群牛在河上的石头上跳来跳去,现在问你如何通过去掉M个石头,使得牛跳过石头的最短距离变得最大? 这一题比较经典,分治法的经典,二分法可以很方便处理这个问题,我们只要明白比较函数这 ...

  2. (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识

    开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...

  3. 【剑指offer】题目36 数组中的逆序对

    数组中任取两个数字,如果前面的数字大于后面的数字称为一个逆序对 如:1,2,1,2,1 有3个逆序对 思路:知道O(N2)肯定是错的.开始想hash,试图找到O(n)的算法,想了很久,找不到.后来想到 ...

  4. 【XLL API 函数】xlfUnregister (Form 1)

    此函数可以被 Excel 已经载入的 XLL 或 DLL 调用.它等效于宏表函数 UNREGISTER. xlfUnregister 有两种调用形式: 形式1:Unregister 单独的命令或函数 ...

  5. IOS-Gesture(手势识别)

    手势识别——Gesture Recognizer •iOS3.2版本之后,苹果推出了手势识别(Gesture Recognizer),其目的是: –简化开发者的开发难度 –统一用户体验 • •iOS目 ...

  6. 在程序中使用geos.dll

    1 在项目->property->configuration properties->c/c++->general->additional include directo ...

  7. CSS居中布局总结

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  8. 我的JavaEE学习路线图

    从学习Java开发到现在虽然也已经快三年了,但是要说到分享一下经验实在是不敢当.权当是对自己的一个总结吧,希望大家不吝指教,互相交流. 照旧,还是现来整理一下我学习Java的一个路线图吧,然后按照这个 ...

  9. （1）第一个ASP.NET Web API

      Install-Package Microsoft.AspNet.WebApi . Global.asax protected void Application_Start() { AreaReg ...

  10. 关于 redis、memcache、mongoDB 的对比（转载）

    from:http://yang.u85.us/memcache_redis_mongodb.pdf 从以下几个维度,对 redis.memcache.mongoDB 做了对比.1.性能都比较高,性能 ...