这样做的好处是不管有多少个元素等间距分布，都可以直接写在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. Get与Post数据长度的限制

    这个问题在我的开发中也遇到,所以在此贴出来(也是在网上搜出来的,呵呵)这是原贴地址http://blog.csdn.net/somat/archive/2004/10/29/158707.aspx两个 ...

  2. JavaScript prototype应用

    //JavaScript自定义功能 //1,去除字符串两端空格 String.prototype.trim = function() { var start, end; start = 0; end  ...

  3. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  4. MVC控制下输出图片、javascript与json格式

    /// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...

  5. iOS 简单提示view

    +(void)showMessage:(NSString *)message{    UIWindow * window = [UIApplication sharedApplication].key ...

  6. case/casez/casex 的区分与使用

    参考:http://www.cnblogs.com/poiu-elab/archive/2012/11/02/2751323.html 与  verilog数字系统设计基础 一般来说,使用最多的是CA ...

  7. sqlserver 用户、账号、安全等问题小汇

    一.孤立账号 SQL Server 的用户安全管理分两层,整个SQL Server 服务器一层,每个数据库一层. 在服务器层的帐号,叫登录账户(SQL Server:服务器角色),可以设置它管理整个S ...

  8. 关于android的单位dp与px

    原文:Android中dp和px之间进行转换 官方文档:http://developer.android.com/guide/practices/screens_support.html The de ...

  9. Android Programming: Pushing the Limits -- Chapter 1: Fine-Tuning Your Development Environment

    ADB命令 Application Exerciser Monkey Gradle ProGuard 代码重用 版本控制 静态代码分析 代码重构 开发者模式   ADB命令: @.adb help:查 ...

  10. 不定义JQuery插件，不要说会JQuery 分类： JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...