内嵌块列表项之间的空格
可能重复：
内嵌块列表项中的不需要的边距
如何从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>
我已经看到了，并在之前回答：
经过进一步的研究，我发现inline-block是一个依赖于空白的方法，依赖于字体设置。 在这种情况下，4px被渲染。
为了避免这种情况，您可以将所有的内容一起放入一行，或者封闭结束标签，并像这样开始标记：
<ul> <li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li> </ul>
这里的例子 。
正如其他答案和评论所提到的，解决这个问题的最佳做法是添加font-size: 0; 到父元素：
ul { font-size: 0; } ul li { font-size: 14px; display: inline-block; }
这对HTML可读性更好（避免一起运行标签等）。 间距效果是由于字体的间距设置的，所以您必须重置内联元素并将其重新设置为内容。
解：
ul { font-size: 0; } ul li { font-size: 14px; display: inline-block; }
您必须将父级字体大小设置为0
我将添加float的左侧的CSS属性，如下所示。 这摆脱了额外的空间。
ul li { float:left; }
实际上，这不是特定的display:inline-block ，但也适用于display:inline 。 因此，除了DavidHorák的解决scheme之外，这也适用于：
ul { font-size: 0; } ul li { font-size: 14px; display: inline; }
另一个解决scheme，类似于Gerbus的解决scheme ，但是这也适用于相对字体大小。
ul { letter-spacing: -1em; /* Effectively collapses white-space */ } ul li { display: inline; letter-spacing: normal; /* Reset letter-spacing to normal value */ }
我有同样的问题，当我在菜单上使用内联块时，每个“李”之间有空格，我find了一个简单的解决scheme，我不记得我在哪里find它了，无论如何，这是我做的。
<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”然后水平空间消失。 希望这个问题的答案谢谢
只是删除你的HTML代码中的李之间的rest…只在一行中的李..
即使它不是基于inline-block ，这个解决scheme可能值得考虑（允许从上层几乎相同的格式控制）。
ul { display: table; } ul li { display: table-cell; }
- IE8 +与主stream浏览器兼容
- 相对/固定字体大小无关
- 独立的HTML代码格式（无需粘贴
</li><li>）
