李之间的空白无处不在

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 元素之间没有边距。每里之间的space与你的

有关

   width: 16.3%;

所以你按比例有 6 个元素 spaced ..

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

Answer 2

这看起来像 </li> 和 <li> 标签之间的 space/new 行字符。尝试这样编写标记：

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

Answer 3

space display: inline-block 的工作原理有一个 'side effect'（实际上令人困惑但有意为之的行为）。内联块元素与内联元素呈现相同，即假定它们应该是一行文本的一部分。再加上 HTML 将所有白色 space（space、制表符、换行符）压缩为单个 space 并且发生的是 换行符每个 LI 之间变成一个 space 字符，元素之间有一个小的可见间隙。

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

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

还有其他方法。各有优缺点。

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

李之间的空白无处不在

Margins between li's out of nowhere

html

css

margin

padding