li 之间的空白无处不在

Question

所以，我正在创建一个菜单，我注意到 li 之间有一些无法解释的边距。在开发者的控制台中也看不到它。这是代码： HTML

<div class="navbar">
                <ul class="navbar_ul">
                    <li class="navbar_list_item navbar_main">Point Blank</li>
                    <li class="navbar_list_item navbar_main">Tanki Online</li>
                    <li class="navbar_list_item navbar_main">Dota 2</li>
                    <li class="navbar_list_item navbar_main">Warface</li>
                    <li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
                    <li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
                </ul>
            </div>

还有，这里是 CSS：

.navbar_list_item {
        display: inline-block;
        }
.navbar, .navbar ul, .navbar li {
        text-align: center;
        padding: 0;
        }

    .navbar_ul {
        width: 100%;
        }

    .navbar_list_item {
        color: white;
        width: 16.3%;
        margin: 0;
        height: 40px;
        }

    .navbar_main {
        background-color: #3978C2;
        }

    .navbar_minor {
        background-color: #2E3A86;
        }

菜单截图如下： 谢谢！

Answer 1

这看起来像是</li> 和<li> 标记之间的空格/换行符。尝试这样编写标记：

<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>

Answer 2

display: inline-block 的工作方式存在“副作用”（实际上是令人困惑但预期的行为）。内联块元素的呈现方式与内联元素相同，即假定它们应该是一行文本的一部分。此外，HTML 将所有空格（空格、制表符、换行符）压缩到一个空格中，每个 LI 之间的换行符变成了一个空格符，并且元素之间有一个小的可见间隙。强>

有几种方法可以解决这个问题。你可能

• 使用负边距使元素重新对齐
• 使用零大小的字体
• 使用display: block 和float: left
• 使用display: table
• 删除代码中 LI 之间的所有空白字符

还有其他方法。每个都有自己的优点和缺点。

可以在这里找到关于不同解决方案的精彩文章：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

li 元素之间没有边距。每个 li 之间的空间与您的相关

   width: 16.3%;

所以你有 6 个 li 元素按比例间隔..

这意味着每个元素的宽度都是固定的..