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

切版常年致力于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.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号