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

    //需要下载memcache 服务 然后 在命令里面 安装和启动服务 //引用 Memcached.ClientLibrary.dllpublic class MemcacheHelper { pub ...

  2. 【leetcode】Subsets II (middle) ☆

    Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...

  3. 【XLL API 函数】xlGetBinaryName

    用于返回由 xlDefineBinaryName 函数定义的名称数据句柄.定义的名称和工作簿一起保存,我们可以在任意时间访问这个名称. 原型 Excel12(xlGetBinaryName, LPXL ...

  4. JS返回上一页

    <button  onclick="javascript:history.go(-1);">返回上一页</button> <button  oncli ...

  5. eclipse使用时jar不在libraries

    jar是在项目工程的目录下 点击工程右键 这样jar包边收到librarles中

  6. Struts2之OGNL

    一.OGNL是什么? OGNL(Object-Graph Navigation Language)对象图导航语言,是一种表达式语言,它可以 1.遍历对象的结构图 2.存取对象的属性(实例属性和静态属性 ...

  7. 三、jQuery--Ajax基础--Ajax全接触--Ajax在JS中的应用

    Ajax的全称:Asynchronous JavaScript And XML(异步的 JavaScript 和 XML). Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分 ...

  8. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

  9. 【openGL】画正弦函数图像

    #include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...

  10. 计算G711语音的打包长度和RTP里timestamp（时间戳）的增长量

    转自:http://blog.csdn.net/xujianglun/article/details/48342367 如何计算G711语音等的打包长度和RTP里timestamp的增长量 一般对于不 ...