如何在导航（HTML/CSS）中删除列表项之间的空格

在导航中删除li项目之间的空格时遇到问题，我已经为该项目设置了边距：0px&锚定链接，但空格/间距仍然存在

如何删除这些空格

/*导航样式*/ 导航{ 背景：rgba6,19,72,1； 背景：底部线性梯度，rgba6,19,72,10%，rgba15,31,91,1100%； } .导航{ 列表样式：无； 保证金：0； 填充：0； 文本对齐：居中； } 李国荣先生{ 显示：内联； 边际：0px； } 导航{ 宽度：1120px； 保证金：0自动； 最小宽度：120px； } span.homeicon{ 宽度：35px； 高度：32px； 显示：内联块； 垂直对齐：中间对齐； 位置：相对位置； 背景图片：url'http://s16.postimg.org/cq68hbikx/home_icon.png'; 背景尺寸：封面； } .导航a{ 显示：内联块； 填充：10px； 宽度：120px； 文字装饰：无； 颜色：白色； 字体系列：arial； 线高：30px； 高度：30px； 边际：0px； 边框：1px实心344da7； 边界顶部：无； } a、 纳乌之家酒店{ 最大宽度：50px； 宽度：50px！重要； } .导航a:悬停{ 背景色：344da7； 身高：100%； }

---

这些空格实际上是由html中的空白造成的

要解决此问题，请将float:left添加到标记：

要确定它确实是HTML中的空白，请尝试删除它并进行测试：

.导航{ 列表样式：无； 保证金：0； 填充：0； 文本对齐：居中； } 李国荣先生{ 显示：内联； 边际：0px； } 导航{ 宽度：1120px； 保证金：0自动； 最小宽度：120px； } span.homeicon{ 宽度：35px； 高度：32px； 显示：内联块； 垂直对齐：中间对齐； 位置：相对位置； 背景图片：url'http://s16.postimg.org/cq68hbikx/home_icon.png'; 背景尺寸：封面； } .导航a{ 显示：内联块； 填充：10px； 宽度：120px； 文字装饰：无； 字体系列：arial； 线高：30px； 高度：30px； 边际：0px； 边框：1px实心344da7； } a、 纳乌之家酒店{ 最大宽度：50px； 宽度：50px！重要； } .导航a:悬停{ 背景色：344da7； 身高：100%； } 带空格 没有空格 试试看

---

您可能想尝试使用display:flex；相反，空格是由空格引起的。您应该确保每个li之间没有空格

最好的方法是：

<ul class="nav"><!--
    --><li><a href="" class="nav_home"><span class="homeicon"></span></a></li><!--
    --><li><a href="">SPORTS</a></li><!--
    --><li><a href="">LIVE CASINO</a></li><!--
    --><li><a href="">SLOTS</a></li><!--
    --><li><a href="">POKER</a></li><!--
    --><li><a href="">PROMOTION</a></li><!--
    --><li><a href="">BANKING</a></li><!--
    --><li><a href="">AFFILIATE</a></li>
</ul>

---

当然，您可以将整个布局更改为使用浮动，但这并不是最好的方法，而且有点倒退。创建内联块是为了解决在布局中使用浮点数的问题。

要删除导航项之间的空格，只需执行以下操作：

ul {
    font-size: 0;
}

---

您的.nav a设置为120像素宽。删除/更改可以解决问题。你有css重置吗：是的，我有css重置@Mikey@Billy我试过了，差距仍然存在，不，我认为最好的解决办法是使用弹性盒。更重要的是，大多数情况下，这些内容都是由服务器端php/ruby生成的，因此您也可以不包含空格，它很容易美化以进行调试。当然，flexbox也可以工作，而且是一种较新的技术。但我建议的是阻力最小的路径，因为OP的布局已经使用了内联块，这一点都没有错。

ul {
    font-size: 0;
}