这样做的好处是不管有多少个元素等间距分布，都可以直接写在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. HDU 1823 Luck and Love（二维线段树）

    之前只知道这个东西的大概概念,没具体去写,最近呵呵,今补上. 二维线段树 -- 点更段查 #include <cstdio> #include <cstring> #inclu ...

  2. 创建odoo数据库时出现错误原因

    安装完odoo 8.0后创建数据库时出现如下错误信息: Odoo Odoo Server Error Traceback (most recent call last): File "D:\ ...

  3. java内存分配原理

    一般Java在内存分配时会涉及到以下区域: ◆寄存器:我们在程序中无法控制 ◆栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 ◆堆:存放用new产生的数据 ◆静态域:存放在 ...

  4. xcode运行push通知总是提示输入用户名和密码

    xcode运行push通知总是提示输入用户名和密码,目前找到的解决方案是,  打开钥匙串,然后找到push证书下面的私有密钥,双击进入将访问控制设置为允许全部访问,即可.

  5. vs c++系统函数 计时器和暂停

    在vs console下, 1 添加计时器 #include <Windows.h> double start = GetTickCount(); double end = GetTick ...

  6. c语言if语句

    #include<stdio.h>#include<windows.h>#include <limits.h>#include <math.h>int ...

  7. NYOJ之水仙花数

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsAAAAInCAIAAAAZDHiCAAAgAElEQVR4nO3dPVLjzNoG4G8T5CyEFC

  8. Stuts2的"struts.devMode"设置成true后，不起作用，仍需要重启tomcat

    在项目的struts.xml加入了常量配置:<constant name="struts.devMode" value="true" />后,重启服 ...

  9. Delphi如何处理不同类型的文件

    参考:http://www.cnblogs.com/railgunman/articles/1800318.html 程序设计当中,我们时常遇到需要处理文件.目录及驱动器的情况,这里将对如何处理不同类 ...

  10. 【网络资料】如何优雅地使用Sublime Text3

    如何优雅地使用Sublime Text3 Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相 ...