在仿造酷狗音乐官网的导航栏时，遇到li元素设置为inline-block后存在间距问题。浏览器默认将inline元素间的空白字符渲染为空格，导致间隔。本文介绍了四种解决方法：1) 避免li元素换行；2) 使用margin-right负值；3) 设置float:left; 4) 父元素设font-size:0，子元素重置font-size。
今天在仿酷狗音乐官网的时候，在写一个导航栏的时候，遇到了这样的一个问题（为直观一点，这里我们将它的背景颜色设置为红色）：
如下，将两个ul中的li设置为inline-block之后，理想中的状态应该是像这样，两个li元素之间并没有任何的间隔，连在一起的，
然而实际上的状态是，
为什么呢？
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度，所以两个li之间的空格间隙就是这么出来了。
解决办法：
第一种：
既然造成这个原因的理由是<li>换行造成的，最为直接简单的办法就是不让<li>换行，即像这样
最低0.47元/天 解锁文章
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
