今天在仿酷狗音乐官网的时候,在写一个导航栏的时候,遇到了这样的一个问题(为直观一点,这里我们将它的背景颜色设置为红色):
如下,将两个ul中的li设置为inline-block之后,理想中的状态应该是像这样,两个li元素之间并没有任何的间隔,连在一起的,
然而实际上的状态是,
为什么呢?
浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上面的代码<li>换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度,所以两个li之间的空格间隙就是这么出来了。
解决办法:
第一种:
既然造成这个原因的理由是<li>换行造成的,最为直接简单的办法就是不让<li>换行,即像这样
然后你就会发现,没有换行的<li>之间是没有间隙的,而换行的<li>依旧存在间隙
但是这样子过后,大量的<li>标签写在一行,代码不够美观,看起来很冗长
第二种:
使用margin-right负值,使得右边的<li>元素左移覆盖掉前者的间隙。但是不同浏览器之间两者的间隙是不同的,所以这个办法并不通用
效果图如下:
两个元素之间没有空隙了
第三种:
为inline-block元素添加样式float:left,利用浮动覆盖间隙
第四种:
在父元素中设置font-size: 0,然后在子元素上重置正确的font-size。inline-block元素必须设定字体,不然行内元素中的字体不不显示