Question

注意白色边框列表元素每个都有一个空格，我无法弄清楚这个空间来自哪里...尝试删除填充和边距请帮助。

Answer 1

您应该删除所有内联块元素之间的空白区域。 inline-block元素与inline元素类似，如果在它们之间添加任何空格，通常会显示。

您可以在inline-block元素中包含空格，以提高可读性。

<ul>
   <li>
       <a href="#">TEST1 <span>2</span></a>
   </li><li>
       <a href="#">TEST2 <span>2</span></a>
   </li><li>
       <a href="#">TEST3 <span>2</span></a>
   </li><li>
       <a href="#">TEST4 <span>2</span></a>
   </li>
</ul>

Answer 2

您也可以在不删除任何空格的情况下处理此问题：

ul {
    ...
    font-size: 0;
}
header nav li {
    ...
    font-size: 14px;
}

Answer 3

Mathias是对的。您需要删除标记中LI项之间的空格。

你有：

<li><a href="#">TEST1 <span>2</span></a></li>
<li><a href="#">TEST2 <span>2</span></a></li>

您需要将其格式化为：

<li><a href="#">TEST1 <span>2</span></a></li><li><a href="#">TEST2 <span>2</span></a></li>

问题在于您告诉您的LI是内联的。作为内联元素，空格将影响间距。

Answer 4

这是由代码中的换行符引起的常见问题。

<li><a href="#">TEST1 <span>2</span></a>
</li><li><a href="#">TEST2 <span>2</span></a>
</li><li><a href="#">TEST3 <span>2</span></a>
</li><li><a href="#">TEST4 <span>2</span></a>

此处，第一个列表标记和起始</li>的结束标记<li>在一起，因此浏览器会看到两者都在同一行中。因此，每当您看到这些不必要的空格时，请通过连接结束标记和起始标记来删除这些换行符。

希望这有帮助！

Answer 5

要回答您的问题，您的<li>代码之间会有空格。空白区域可能会影响内联块元素。所以你的代码必须是：

<header>
    <div class="container">
        <div class="col-lg-12 hidden-xs">
            <nav>
                <ul>
                    <li><a href="#">TEST1 <span>2</span></a></li><li><a href="#">TEST2 <span>2</span></a></li><li><a href="#">TEST3 <span>2</span></a></li><li><a href="#">TEST4 <span>2</span></a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

请注意，上一个列表项的</li>和下一个列表项的<li>之间没有空格。

然而，一旦你解决了这个问题，你也会注意到边框的元素之间的边长是两端的两倍。这可能是故意的，但我认为不是。要解决此问题，您只需从<a>标记中删除边框右侧样式，然后将其添加到CSS中：

header nav li:last-child a {
  border-right: 1px solid white;
}

这会选择上一个<a>内的<li>并为其添加边框权限。

<强> DEMO

HTML内联块列表中间有未知空格

5 个答案: