inline-block元素的4px空白间距解决方案

2020-04-27 07:45:27易采站长站整理

<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>

结构四,我想是大家常用来解决这样的问题的方法吧,下面我们来看看按上述几种方法写的效果:

方法一所说的是通过标签来解决,虽然问题是解决了,但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候,一旦你的HTML不是自己写,而是后台生成,就比如CMS来说,标签后台生成,此时,我想大家又要骂街了,这可怎么办?其实我们除了上面的方法,还可以使用CSS来解决的。

方法二:负的margin

很多地方讨论使用负的margin来解决,比如说:

复制代码
ul {
font-size: 12px;
}
ul li {
margin-right: -4px;
*margin-right: 0;
}

这种解决方法并不完美,如果你的父元素设置的字号不一样,可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。

当然有些文章介绍使用"-0.25em"来解决,这也是跟元素的字号有极大的关系。所以我个人建议不使用负的margin来解决这样的问题。

方法三:设置父元素字体为0

第三种方法设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小。

复制代码
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
font-size: 12px;
}

这样处理在Firexfox,chrome等浏览器下是达到了效果,可是在Safari下可问题依然存在:

按此来说,方法三也不是绝佳的好方法,用不用大家自己考虑。

方法四:丢失结束标签

说实在的,这种方法又回到了方法一,在html标签上动手脚。就是让“inline-block”元素丢失关闭标签

复制代码
<ul>
<li>item1
<li>item2
<li>item3
<li>item4
<li>item5
</ul>

样式基本不变,我们来看看效果:

这种方法虽然能达到各浏览器的兼容,但还是有一个前提,那就是“DOCTYPE”要选择对,在“XHTML”下可就问题又出来了。

方法五:jquery方法