p2h.cn始于05年,最早由来自腾讯,网易的前开发工程师,曾经为美的,格兰仕,电信,陆虎等企业提供过高品质psd转html解决方案。累计300多个客户至今,超过1000多个项目。

专注前端技术,关注用户体验

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>

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


欢迎转载,转载请注明来源:http://www.p2h.cn/inline-block-jianxi/

相关链接: