您的位置：首页 > 其它

如何解决inline-block元素的空白间距

2014-10-22 16:55 465 查看

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。但是inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。关于这个问题，原来很多人不知道啊。呵呵~其实很简单，当原素被转换为inline-block显示的时候，那么该元素会具有inline的一些属性，所以当你在标签之间换行的时候会产生空格，inline-block之间的间距就是一个空格的位置，你要算间隙是几个像素，其实依赖于你的字体设置大小，空格是个字符啊，所以-margin补间距之类的方法不可取，所以大家每个人出来的负值都不一样（-_-!）。空格是由inline-block标签之间换行产生的，那么解决方法简单了，不要在转换为inline-block的标签的代码之间换行就行了，开发人员一定要在精确布局的时候要注意一下。 inline-block具有inline的一些属性，那么inline标签代码之间换行本来就会有空格产生的；IE倒是奇怪没有产生空格，但是也讲的通。

大家首先来看一个DEMO：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0}
ul li{list-style:none}
li{ display:inline-block;*display:inline;*zoom:1;background:green; padding:5px}
</style>
</head>
<body>
<ul>
<li>WEB前端开发</li>
<li>前端开发</li>
<li>前端开发:http://www.css119.com</li>
</ul>
</body>
</html>

提示：你可以先修改部分代码再运行。

我们可以看到：在 ie8、chrome、firefox、opera 以及 safari 浏览器下，li之间有“空白间隙”。
但是在 ie6 和 ie7 浏览器下却正常显示。
解决方法：
第一：去掉html标签中的空格和回车；
例如：

<ul><li>web前端开发</li><li>前端开发</li><li>前端开发:http://www.css119.com</li></ul>

第二：改变html标签的结构(下面只展示出了一种，还有其他的类似方法)；
例如：

<ul>
<li>WEB前端开发</li
><li>前端开发</li
><li>前端开发:http://www.css119.com</li>
</ul>

第三：利用负margin解决（不推荐，具体负margin多少取决于字体的大小）；

第四：设置父元素font-size:0;子元素重新设置自己的font-size；
例如：

ul{font-size:0}
li{ display:inline-block;*display:inline;*zoom:1;background:green; padding:5px;font-size:12px}

可以看到在 ie8，firefox，chrome 和 opera 浏览器下已经没有问题了，但是在低版本safari 浏览器下还是有问题。
关于低版本safari 浏览器的兼容。
可以利用letter-space:-N px或者word-spacing:-N px来解决。

扩展阅读：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航