如何解决inline-block标签之间的空白块
2019-04-15 本文已影响0人
Aniugel
喜欢的朋友可以点赞关注，有问题可以留言。
1.问题怎么产生的代码如下：
因为li标签之间是分行的或者说没有首尾相连，导致有的浏览器会存在间隙。
<style>
* {
margin: 0;
padding: 0;
}
ul {
background: firebrick;
}
ul li {
/* display: inline-block; */
display: inline;
zoom: 1;
background: #ffcccc;
}
</style>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
效果图如下：
image.png
上面的demo效果，明显的可以看出，
li元素之间存在空白：
2.解决方法
1.改变HTML结构(作用不稳定，不推荐)
原理就是让li标签之间不分行，紧密相连
方法①
<ul>
<li>
item1</li><li>
item2</li><li>
item3</li><li>
item4</li><li>
item5</li>
</ul>
方法②
<ul>
<li>item1</li
><li>item2</li
><li>item3</li
><li>item4</li
><li>item5</li>
</ul>
方法③
<ul>
<li>item1</li><!--
--><li>item2</li><!--
--><li>item3</li><!--
--><li>item4</li><!--
--><li>item5</li>
</ul>
方法④
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
总结：方法只适合于写静态页面的时候，一旦你的HTML不是自己写，而是后台生成，就比如CMS来说，标签后台生成，此时，我想大家又要骂街了，这可怎么办？其实我们除了上面的方法，还可以使用CSS来解决的
2.设置子集负的margin
ul {
font-size: 12px;
}
ul li {
margin-right: -4px;
}
这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。
3.设置父元素字体为0，然后在子集元素上重置字体需要的大小
<style>
* {
margin: 0;
padding: 0;
}
ul {
background: firebrick;
text-align: center;
font-size: 0;
}
ul li {
display: inline-block;
zoom: 1;
height: 40px;
background: #ffcccc;
font-size: 17px;
}
</style>
</style>
这种方法比较常用：平时适合用inline-block元素进行50%的两栏布局，因为line-block元素存在间隙，所以第二行会掉下来，我们可以消除间隙，第二行就不会掉下来了，解决方法如本文所述5种方法。情况如下图:
image.png
修改后
image.png
4.jquery方法
<body>
<ul class="removeTextNodes">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
<script>
$('.removeTextNodes').contents().filter(function () {
//return this.nodeType === 3;
return this.nodeName !== 'LI';
}).remove();
</script>
5.给父级元素加flex或者子集元素float
flex方法如下：
image.png
float方法如下：
image.png
