li、img等元素设置inline-block后的空白间距问题

li、img等元素设置inline-block后的空白间距问题 经验总结 第1张

关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

不过有一个问题,就是使用 inline-block 的元素之间会存在 4-5px 的空白间隙。今天就记录一下解决这个 4-5px 的方法。

首先写一个 demo :

HTML:

<ul>
	<li>首页</li>
	<li>产品介绍</li>
	<li>联系我们</li>
	<li>关于我们</li>
</ul>

CSS:

*{
	margin: 0;
	padding: 0;
}
ul{
	display: inline-block;
	list-style: none;
	background: #999;
	text-align: center;
	margin: 10px auto;
}
li{
	display: inline-block;
	background: #555;
	padding: 5px 10px;
	color: #FFF;
}

效果如图:

li、img等元素设置inline-block后的空白间距问题 经验总结 第2张

从上面的 demo 可以看出,在 inline-block 的元素之间存在一个空白间隙。

下面说一下解决这一间隙的几种方法:

方法一:简单一点的方法就是就是改变HTML的结构,下面任何一种方法都可以达到效果。

结构1:

<ul>
	<li>
	首页</li><li>
	产品介绍</li><li>
	联系我们</li><li>
	关于我们</li>
</ul>

这种方法接近标签换行格式的写法,也比较容易阅读。

结构2:

<ul>
	<li>首页</li
	><li>产品介绍</li
	><li>联系我们</li
	><li>关于我们</li>
</ul>

结构2和结构1几乎一样,结束标签的   成了另一行的起始标签。

结构3:

<ul>
	<li>首页</li><!--
	--><li>产品介绍</li><!--
	--><li>联系我们</li><!--
	--><li>关于我们</li>
</ul>

结构3的方法采用的是 html 注释的方法,这种方法可能不太常见,不过同样能解决我们的问题。

结构4:

<ul><li>首页</li><li>产品介绍</li><li>联系我们</li><li>关于我们</li></ul>

结构4,应该是比较常用的方法。

结构5:

<ul>
   <li>首页
   <li>产品介绍
   <li>联系我们
   <li>关于我们
</ul>

就是让 inline-block 元素丢失关闭标签。

方法一最终效果如图:

li、img等元素设置inline-block后的空白间距问题 经验总结 第3张

不过方法一是通过标签来解决,虽然问题解决了,但不能称作是技巧。而且上面的方法只适合于写静态页面,如果标签是后台生成,就不合适了。

方法二:负的 margin 

li {
   margin-right: -4px;
}

这种解决方法并不完美,因为不同浏览器解析不同,加上父元素的字体大小不固定,这个“-4px”就不能解决问题。

li、img等元素设置inline-block后的空白间距问题 经验总结 第4张

方法三: 设置父元素字体为0 ,子元素重新设置字体。

ul{
	display: inline-block;
	list-style: none;
	background: #999;
	text-align: center;
	margin: 10px auto;
	font-size: 0;
}
li{
	display: inline-block;
	background: #555;
	padding: 5px 10px;
	color: #FFF;
	font-size: 12px;
}

方法四: jQuery 方法

HTML:

<ul class="removeTextNodes">
	<li>首页</li>
	<li>产品介绍</li>
	<li>联系我们</li>
	<li>关于我们</li>
</ul>

JS:

$('.removeTextNodes').contents().filter(function() {
	return this.nodeType === 3;
}).remove();

通过jQuery来改变“nodeType”的值,从而实现我们需要的效果。

全兼容的样式解决方法:

使用纯 CSS 实现兼容的方法,在父元素中设置 font-size:0 。用来兼容 Chrome,使用 letter-space:-n px 来兼容safari。

ul {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
ul li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  zoom:1;
}


参考文献:

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

未经允许不得转载:Web前端开发资源网 » li、img等元素设置inline-block后的空白间距问题

推荐阅读:

判断网页是通过PC端还是移动终端打开的

JQuery几个mouse事件的区别和用法

js获取input上传文件的文件名和扩展名的方法

Jetbrains系列激活补丁JetbrainsCrack-2.8更新

设置 letter-spacing 后文字不能居中的解决方法

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)