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

be***ar 分类：Html5 人气：1389 回帖：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）垃圾回帖将一律封号处理……

Lv5 码农

so***70 移动开发工程师 6年前#1

这是inline-block的空白间隙问题

这些是一些空白字符，看不见，但是会占据一定的width等

解决办法有很多
某处理方法来自 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

.finally-solve {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
.finally-solve li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
}

具体处理方法你可以看下 w3cplus上的文章如何解决inline-block元素的空白间距

Lv5 码农

ga***et 移动开发工程师 6年前#2

你把父级的字体设置成0就没有间隙了！

Lv2 入门

麦***气 JAVA开发工程师 6年前#3

楼上方法视乎都对，最简单办法是不换行

Lv6 码匠

de***oo 页面重构设计 6年前#4

我试了一下

  * { margin: 0; padding: 0; }
  section { width: 1000px; border: 1px solid #000; }
  li { text-align: center; list-style: none; display: inline-block; padding: 25px; width: 150px; height: 100px; line-height: 100px; margin-right: -8px; }
  </style>
</head>
<body>
<section>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</section>

这个margin-right:-8px;
兼容 chrome firefox IE Edge 360

Lv5 码农

39***81 PHP开发工程师 6年前#5

你既然使用的是Li,为什么不去使用float:left.来实现你所要的功能呢。
另外这个并不是未知间隙，但是它的间隙宽度在不同浏览器都有不同的宽度，所以不可以通过修改偏移来实现，其实我常用的方法就是前面几个不要加闭合标签即可。
例如

<a>你好
<a>hello
<a>world</a>

在最后一个标签加上闭合标签，防止出现问题。
这样可以完美解决间隙问题。

Lv1 新人

ke***69 PHP开发工程师 6年前#6

回车换行导致的，解决方案很多，找到根源了，你可以删除换行，你可以把ul的font-size:0,然后li，写上你的需要的字号（chrome应该是有最小字号12的问题），还有就是margin设置负值

Lv4 码徒

13***64 软件测试工程师 6年前#7

请设置父级元素
font-size:0;

Lv5 码农

蜗***牛 Linux系统工程师 6年前#8

<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>

楼主，当你吧块级元素，转换成行内元素的时候，有没有想过空格会影响到排版呢？
就比如

<p><a href="">yyy</a><b>xxxxx<b></p>

<p><a href="">yyy</a> <b>xxxxx<b></p>

<p>
 <a href="">yyy</a>
 <b>xxxxx<b>
</p>

这3种情况显示的是一样？
如果你真看明白了我给你的例子，那么你的问题就已经解决了。

结论

这个未知间隙， 就是空格，也就是你的换行符，块级元素可以忽略换行符，但是行内元素不会。

Lv6 码匠

su***an JAVA开发工程师 6年前#9

为了保持html结构好看，我常用的做法是在父元素上设置 font-size: 0

Lv6 码匠

风***呀 Web前端工程师 6年前#10

@xiadd Opera是个坑哈哈，4px不符合

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

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

第一个li是正常的

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

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

Chrome（1015px）：

Firefox（1015px）：

Chrome（1024px）：

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

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

结论

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