inline-block去掉空白距离方法

最新推荐文章于 2025-01-01 15:28:02 发布

转载最新推荐文章于 2025-01-01 15:28:02 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-sheena/archive/2012/12/26/2834525.html

自己写的测试案例刚开始发现居然没有空白的距离，后来请教才发现原来是因为没有换行的原因。注意只有inline-block换行了才会出现空白距离的问题。而且任何元素和标签只要在html里面进行了换行，显示在浏览器的会后就都会有间距。

原型是：

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

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

有空白距离的效果：

解决方法有：

第一种方法：加上 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结构，都兼容

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

或者

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

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

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;}

ps:注意：列表显示这些元素如果用块元素、行内元素，在除去了边距之后，在ie6显示下面会有1像素的差别，且是在使用font-size：0；和font-size：12px;这种方法的时候出现，用第二种和第三种都不出现这种差异。

以下是行内元素的时候的代码：

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

<p class="test3">
  <span>关于我们</span>
  <span>客户服务</span>
  <span>招聘信息</span>
  <span>隐私声明</span>
</p>

so,总结下来，

1、可以不换行的时候就不要换行

2、万一要换行，能改结构的时候就不要用css

3、用css的时候建议用第三种办法，并且注意要用块元素，不要用行内元素。

转载于:https://www.cnblogs.com/web-sheena/archive/2012/12/26/2834525.html