Question

可能重复：
  Unwanted margin in inline-block list items
  How to remove “Invisible space” from HTML

为什么内联块列表项中有空格？无论我如何将我的列表项目放入菜单，我总是得到空格。

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Answer 1

我已经看过这个并在之前回答过：

我further research之后发现inline-block是一个依赖于空白的方法和取决于字体设置。在这种情况下，渲染4px。

为了避免这种情况，你可以运行所有的 li一起排成一行或一行结束标记和开始标记在一起像这样：

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here

正如其他答案和评论所述，解决此问题的最佳做法是将font-size: 0;添加到父元素：

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

这对HTML可读性更好（避免一起运行标记等）。间距效果是由于字体的间距设置，因此您必须为内联元素重置它并为其中的内容重新设置它。

Answer 2

解决方案：

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

您必须将父字体大小设置为0

Answer 3

我会添加float left的CSS属性，如下所示。这摆脱了额外的空间。

ul li {
    float:left;
}

Answer 4

实际上，这不是display:inline-block特有的，但也适用于display:inline。因此，除了DavidHorák的解决方案之外，这也有效：

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Answer 5

另一个解决方案，类似于Gerbus' solution，但这也适用于相对字体大小调整。

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

Answer 6

我有同样的问题，当我在菜单上使用内联块时，我在每个“li”之间有空格我发现了一个简单的解决方案，我不记得我在哪里发现它，无论如何这里是我做的

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

您在每个结尾和开头之间添加注释标记：“li” 然后水平空间消失。希望能回答这个问题谢谢

Answer 7

只需删除html代码中li之间的中断... 让李只在一行..

Answer 8

即使它不是基于inline-block，这个解决方案也值得考虑（允许从上层几乎相同的格式控制）。

ul {
  display: table;
}
ul li {
  display: table-cell;
}

IE8+ & major browsers compatible
相对/固定字体大小独立
HTML代码格式独立（无需粘贴</li><li>）

内联块列表项之间的空格

8 个答案: