如何移除inline-block元素之间的空白
我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”。那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择,就需要取决于实际情况。
方法一:删除空格
之所以有空白,是因为元素之间存在空格(连续多个空格、换行符、制表符在HTML中都认为是一个空格),那么最简单的方式,就是删除空格。简单,但是格式有点...不太好看。
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
或者
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>
或者
<ul>
<li>item 1</li><!--
--><li>item 2</li><!--
--><li>item 3</li>
</ul>
或者
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
方法二:将字号设置为0
一个空格,如果它的font-size是0,那么它的width也就是0,所以空白也就不存在了。但是缺点是子节点会继承父节点属性,所以<li>的font-size也被置为0了,为了让<li>显示出来,需要在<li>上单独设置font-size。
ul { font-size: 0; } li { font-size: 30px; }
方法三:设置为float
当一个元素的float不是none时,这个元素相当于一个block元素,所以这种inline-block之间的空白问题,也就不存在了,但是注意,需要在父元素上清楚浮动,否则会影响其他元素的布局。
ul { overflow: hidden; } li { float: left; }
方法四:使用flexbox进行布局
相对来说比较推荐的做法,但是需要注意当前项目需要支持的浏览器,是否支持flexbox布局。