切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2018年01月25日

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

本文就“如何去掉inline-block的间隙最优解决方法”展开讨论，作者切版网，发布于2018年01月25日 全文共610个字，预计阅读时长2分2秒。

切版常年致力于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/

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。