码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:style   blog   http   color   ar   使用   strong   sp   div   

平时制作页面的时候经常会用到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元素间距的几种方法

标签:style   blog   http   color   ar   使用   strong   sp   div   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!