Question

很长一段时间以来，我都会遇到一个问题，这个空格出现在这个菜单的<div>标签之间的导航菜单栏中。

此问题仅发生在Chrome上（目前版本为59.0.3071.115（Build officiel）（64位），但与之前版本的Chrome版本相同）。

以下是说明问题的图片：

[！[空间导航菜单栏] [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>

使用CSS：

a.main_link:active, a.main_link:visited, a.main_link:link {
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    color: #FFFFFF;
    line-height: 50px;
}

div.navigation {
    height: 50px;
    width: 133px;
    vertical-align: middle;
    text-align: center;
    border-right-width: 0;
    border-left-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

table.linkcontainer {
    border-collapse: collapse;
    border-spacing: 0;
}

#nav_bar {
    background-image: url(/images_template/header_bg_min.png);
    background-size: 798px 50px;
    border: 0;
    margin: 0 auto;
    padding: 0;
    width: 798px;
    height: 50px;
}

正如您所看到的，每个元素都有<div>个元素133px，其中798px为总宽度（width #nav_bar上面）

尽管如此，我通过width: 101% div.navigation（使用Chrome Inspector interface）部分找到了一个解决方案（这并不令人满意）：

div.navigation {
    height: 50px;
    width: 101%;
    vertical-align: middle;
    text-align: center;
    border-right-width: 0;
    border-left-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

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

[！[不再有空格，但菜单元素不居中] [3]] [3]

正如您所看到的，通过将width值放在100%之上，<div>元素之间没有空格，但现在，它们不再是水平居中的，就像在此开头一样交。

我怎样才能保持这个解决方案（使白色空间消失），同时保持菜单each <div> element的水平居中？

也许有人会有另一种解决办法来解决Chrome的白色空间问题？

此致

Answer 1

尝试添加：

div.navigation {
  line-height: 0; 
}

Answer 2

由于您为导航框133px设置了设置宽度，但是根据屏幕宽度的百分比将它们隔开，因此会在导航框之间创建空白区域以补偿丢失的空间。您可以做的是，将每个导航框的宽度设置为总宽度的一部分，您有6个导航框，它们都可以是(100/6)%宽度，因此可以拉伸和缩小以填充任何屏幕尺寸。除了确保它们不会太小之外，你可以补充一点，各个导航盒的宽度不应低于133px。

Answer 3

你的div包含在td元素中。

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

你也在使用表格进行布局，这在语义上被认为是一个坏主意。

我建议您停止使用表格，而是使用其他方法进行排列。

我尝试制作一个jsbin，重新创建你的问题。但正如您的问题所述，并且在链接的网站上，我无法重现错误。

这是一种修复它的方法，不使用表格。 https://jsbin.com/pahukezahu/1/edit?html,css,js,output

a.main_link:active, a.main_link:visited, a.main_link:link {
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    color: #FFFFFF;
    line-height: 50px;
}
div.linkcontainer{
background:red;
}

div.navigation {
    background:green;
    height: 50px;
    width: 133px;
    display:inline-block;
    vertical-align: middle;
    text-align: center;
    border-right-width: 0;
    border-left-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

#nav_bar {
    background-image: url(/images_template/header_bg_min.png);
    background-size: 798px 50px;
    border: 0;
    margin: 0 auto;
    padding: 0;
    width: 798px;
    height: 50px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body style="background:black">
<div id="nav_bar">
<div class="linkcontainer" style="width:100%">

<div class="navigation">
<a href="/" class="main_link">Home</a>
</div><div class="navigation">
<a href="/astro/"
class="main_link">Fifo</a>
</div><div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div><div class="navigation">
<a href="/philo/"
class="main_link">Lifo</a>
</div><div class="navigation">
<a href="/info/" class="main_link">Exo</a>
</div><div class="navigation">
<a href="/FiLo" class="main_link">FiLo</a>
</div>
</div>
</div>
</body>
</html>

请注意，div之间没有换行符，我发现添加换行符引入了空格。

Answer 4

尝试将此添加到您的css文件顶部。

*{
   margin: 0;
   padding: 0;
 }

希望它会有所帮助。

Answer 5

另一个选择是使用flexbox导航菜单。

＆＃13;

a.listOfB.any()
      .id.in(list);

＆＃13;

body {
  background-color: red;
}

a.main_link,
a.main_link:active,
a.main_link:visited,
a.main_link:link {
  font-weight: bold;
  text-decoration: none;
  display: block;
  width: 100%;
  color: white;
  line-height: 50px;
}

a.main_link:hover {
  color: red;
}

div.navigation {
  background-color: blue;
  width: 133px;
  height: 50px;
  text-align: center;
}

#nav_bar {
  width: 798px;
  margin: 0 auto;
  display: flex;
}

＆＃13;

总是相同的问题，但几乎用CSS解决 - 导航菜单中div之间的空间

5 个答案: