首页 > 其他 > 详细

去除inline-block元素间距的几种方法

时间:2014-10-21 11:43:11      阅读:312      评论:0      收藏:0      [点我收藏+]

平时制作页面的时候经常会用到inline-block属性的元素,而他们是有默认间距的。

今天制作移动端的时候又遇到这个问题,所以仅此记录一下

解决方法有:

第一种方法:加上 font-size:0; 和  font-size:12px; 不兼容safari浏览器,用行内元素李欢li,ie6下面中间有右间距1像素。

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}

第二种方法:改变html结构,都兼容

bubuko.com,布布扣
<ul class="test1">
    <li>
    关于我们</li><li>
    客户服务</li><li>
    招聘信息</li><li>
    隐私声明
    </li>
</ul>
bubuko.com,布布扣

或者

bubuko.com,布布扣
<ul class="test1">
    <li>关于我们</li
    ><li>客户服务</li
    ><li>招聘信息</li
    ><li>隐私声明</li>
</ul>
bubuko.com,布布扣

第三种,父元素中设置font-size:0,用来兼容chrome,firefox等浏览器,而使用letter-space:-N px来兼容safari:都兼容

bubuko.com,布布扣
ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;letter-spacing: normal;word-spacing:normal;font-size:12px;}
bubuko.com,布布扣

去除inline-block元素间距的几种方法

原文:http://www.cnblogs.com/leoy/p/4039796.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!