li元素inline-block横向排列，出现了未知间隙

be***ar 分类：Html5 人气：1394 回帖：15 发布于6年前收藏

Code

<header>
        <ul>
            <li><a href="">我的首页</a></li>
            <li><a href="">GitHub</a></li>
            <li><a href="">about me</a></li>
            <li><a href="">所有内容</a></li>
            </ul>
    </header>

body,ul,h1{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a {
    text-decoration: none;    
} 
header {
    width: 1000px;
}
li {
    padding: 25px;
    text-align: center;
    display: inline-block;
    width: 200px;
}

通过上面的代码，我想将四个`li`元素横向排列，

li width：200px（200*4=800px）;
左右padding为25px（25*8=200px）;
总和1000px；但是实际却超过了1000px。

第一个li是正常的

第二个li开始出现偏移，但预设border，margin都为0；

搞不清楚为什么两个li之间为什么不是紧挨着的

之后我开始凑数，想找出这个间隙的大小，结果发现：

在Firefox中，1015px及以上可以一行显示...
但在Chrome中，1024px及以上时才可以做到一行显示；
我完全搞不懂了...通过Head First进行入门，但是回顾了一下，也没有任何关于这种情况的说明

Chrome（1015px）：

Firefox（1015px）：

Chrome（1024px）：

纠结中...寻求大神指导几句，这个间隙到底是什么东西

标签：html5

讨论这个帖子（15）垃圾回帖将一律封号处理……

Lv6 码匠

wt***00 UI设计师 6年前#1

这个原因是因为li元素的换行引起的，你可以把所有的li写成一行： <li>1</li><li>1</li><li>1</li> ，一定不要换行。

或者用注释符号链接：

<li>1</li><!--
--><li>1</li><!--
--><li>1</li>

或者用 html 5 不闭合的写法：

<li>1
<li>1
<li>1

还有个解决方案就是设置 父级元素的字体大小 font-size: 0px;

Lv5 码农

星***屋产品经理 6年前#2

所以一般的菜单布局尽量不用inline-block，而是用float:left来实现。

Lv3 码奴

懒***材职业无 6年前#3

inline-block间隔问题

Lv1 新人

凌***志移动开发工程师 6年前#4

<li>标签设置为display：inline-block 结束标签的后面添加换行符，这个时候就会产生空白符。这个换行符就是一个字符。会占据位置。

IE8以上的IE浏览器以及FF、chrome等的标准浏览器会产生空白bug问题，其中chrome中显示的是8px的空白bug，但是其他浏览器则是4px的空白bug。

方法一：在代码中</li><li>中间的空白去掉
方法二：通过负向margin解决 margin-right: -4px； *margin-right: 0px； chrome是8px不能解决（ps：我试了一下方法二可以解决chrome。）。*是ie6或者ie7 这是利用ie的解析bug
方法三：设置父元素 font-size ：0；这个不能解决safari ，letter-spacing：-4px;(调整字符间距，将其去掉)这个可以解决safari；二者结合
方法四：丢失结束标签把 </li>去掉（不建议，不过很多压缩工具可以设置去掉结束标签，处女座不能忍）；