Html 始终存在相同的问题，但几乎可以通过CSS解决—导航菜单中div之间的空格

很长一段时间以来，我都遇到了一个问题，就是在这个菜单的

标签之间的导航菜单栏中出现了空格

这个问题只发生在Chrome上（当前版本为59.0.3071.115（Build Officel）（64位），但与所有以前版本的Chrome相同）

下图说明了该问题：

[！[Space to navigation menu bar][1][1]

您也可以直接在链接上进行测试：

[链接查看Chrome上的空白][2]

我的HTML菜单是这样实现的：

<div id="nav_bar">
<table class="linkcontainer" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="navigation">
<a href="/" class="main_link">Home</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/astro/"
class="main_link">Fifo</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/philo/"
class="main_link">Lifo</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/info/" class="main_link">Exo</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/FiLo" class="main_link">FiLo</a>
</div>
</td>
</tr>
</table>
</div>

如您所见，共有6个元素

，每个元素的

133px

，这使得总宽度为

798px

（请参见上文

导航条的
宽度
）

尽管如此，我还是找到了部分解决方案（这并不令人满意），将
宽度：101%
放在
div.navigation
（使用Chrome的
Inspector界面
）：

然后我在这张图片上看到以下菜单：

[！[没有更多空格，但菜单元素没有居中][3][3]

如您所见，通过将
宽度
值置于
100%
之上，元素之间没有空格，但现在，它们不再像本文开头那样水平居中

如何保持此解决方案（使空白消失），同时保持菜单中每个元素的水平居中

也许有人会有另一种解决方案，用Chrome来规避空白的问题

关于
请尝试添加：

div.navigation {
  line-height: 0; 
}

因为您为您的导航框133px设置了一个设置宽度，但是根据屏幕宽度的一%对它们进行间隔，它在导航框之间创建空白空间以补偿丢失的空间。您可以做的是，将每个导航框的宽度设置为总宽度的一部分，您有6个导航框，它们都可以是
（100/6）%
宽度，因此可以一起拉伸和收缩以填充任何屏幕大小。
除了确保它们不会变得太小之外，您还可以添加单个导航框的宽度不得低于133px。
您的div被td元素包裹

由于早期的不兼容性和不特定的标准，表因浏览器之间的差异而臭名昭著

您还使用表进行布局，从语义上讲，这在很大程度上被认为是一个坏主意

我建议您停止使用表格，而是使用其他方法进行布局

我试图制作一个jsbin，来重现你的问题。但正如你的问题所述，在链接的网站上，我无法重现错误

这是一种修复方法，不使用表。


a.main链接：活动，a.main链接：已访问，a.main链接：链接{
字体大小：粗体；
文字装饰：无；
显示：块；
宽度：100%；
颜色：#FFFFFF；
线高：50px；
}
分区链接容器{
背景：红色；
}
分区导航{
背景：绿色；
高度：50px；
宽度：133px；
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
右边框宽度：0；
边框左宽度：0；
保证金：0；
边界：0；
填充：0；
}
#导航栏{
背景图片：url（/images\u template/header\u bg\u min.png）；
背景尺寸：798px 50px；
边界：0；
保证金：0自动；
填充：0；
宽度：798px；
高度：50px；
}

JS-Bin
只需尝试将其添加到css文件的顶部即可

*{
   margin: 0;
   padding: 0;
 }

希望有帮助。
另一个选项是使用flexbox作为导航菜单


正文{
背景色：红色；
}
a、 主链接，
a、 主链接：活动，
a、 主链接：已访问，
a、 主链接：链接{
字体大小：粗体；
文字装饰：无；
显示：块；
宽度：100%；
颜色：白色；
线高：50px；
}
a、 主链接：悬停{
颜色：红色；
}
分区导航{
背景颜色：蓝色；
宽度：133px；
高度：50px；
文本对齐：居中；
}
#导航栏{
宽度：798px；
保证金：0自动；
显示器：flex；
}

根据我的理解，您需要文本居中且宽度相等，对吗？是的，但尽管6*133=798px，但始终存在空格。通过将宽度设置为略大于100%（在我的案例中为101%）的值，没有空格，但文本不再水平居中。请再次请求您使用红色圆圈和图像上的一些文本突出显示图像中的问题。。。。。。。！例如，我尝试为每个框设置：宽度：134px；但这不起作用这很奇怪，当我运行你的代码片段（使用Chrome）时，你的绿色导航栏上没有空格。-@Ryan The Leach我无法复制同一个菜单，div不是水平显示的，而是垂直显示的，你能看一下吗（使用CSS和HTML修改）？感谢您在div.navigation中缺少“display:inline block；”。对不起，我本可以说得更清楚些。*选择器通常也不好，除非是全局重置或默认字体样式。它们可能会对您可能正在使用的其他组件/框架产生负面影响。
div.navigation {
  line-height: 0; 
}

*{
   margin: 0;
   padding: 0;
 }