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

    #!/bin/bash # #Snapshot_Stats - produces a report for system stats # This report will mail to root. ...

  2. IOS searchBar去掉背景

    修改UISearchBar的背景颜色 UISearchBar是由两个subView组成的,一个是UISearchBarBackGround,另一个是UITextField. 要IB中没有直接操作背景的 ...

  3. 火狐----此地址使用了一个通常用于网络浏览以外的端口。出于安全原因，Firefox 取消了该请求。

    FirFox打开80以外的端口,会弹出以下提示: “此地址使用了一个通常用于网络浏览以外的端口.出于安全原因,Firefox 取消了该请求.”.经网上搜索,解决方法如下: 在Firefox地址栏输入a ...

  4. .NET微信公众号开发-3.0查询自定义菜单

    一.前言 前面我们已经创建好了我们的自定义菜单.那么我们现在要如何查询我们自定义的菜单.原理都是一样的,而且都是相当简单,只是接口地址文档换掉了. 2.0开始编码 同样我们首先创建好我的查询页面,在这 ...

  5. Qt 获取Mac地址

    QList<QNetworkInterface> list = QNetworkInterface::allInterfaces(); foreach(QNetworkInterface ...

  6. 如何更改UITextField 的placeholder 的字体颜色

    storyboard 中这样设置 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLa ...

  7. hud 1019最小公倍数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1019 思路:头两个数先求,再用所求的数与后面的一个数求,依次类推 #include<stdlib ...

  8. php 上传文件实例 上传并下载word文件

    上传界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. CLR via C#（02）-基元类型、引用类型、值类型

    http://www.cnblogs.com/qq0827/p/3281150.html 一. 基元类型 编译器能够直接支持的数据类型叫做基元类型.例如int, string等.基元类型和.NET框架 ...

  10. MySQL 主从同步

    http://blog.csdn.net/z69183787/article/details/53897894