如何去掉inline-block的间隙最优解决方法

p2h常年致力于psd转html5等web前端外包,特别是移动h5的web前端外包,就在近期的一个项目中碰到了这个少见的问题,就是 inline-block间隙问题, 为什么说是少见,因为这次的排版是要做一个类似标尺一样的页面,做出每一个刻度,并且刻度会配合JS来做效果, 所以刻度的准确一点不能马虎。

那么如何去掉inline-block呢

1,

首先想到的是通过浮动可以解决,但是这里的情况特殊不能用浮动,pass

2,

据说有一种神奇的方法可以写<li></li>的时候不写回标签</li> ,是不是很怪异,这样写还真可以解决,不过感觉有失标准性,pass

3,

最后采用去掉了标签于标签之间的空格,是可以解决的,因为间隙就是由这个产生的,但是删除标签之间的空格以后,代码变成了一团,没有阅读性, pass

最后采用了一种折中的解决方案,完美解决:

<li>11111</li><!–

–><li>2222</li><!–

–><li>3333</li>

能看明白吗,也是去空格,但是用到了注释,是一种很取巧的方法,分享出来,并且做个笔记。