链接之间的空间是不均匀的

Question

我使用过这个解决方案：How to stretch html / css horizontal navigation items evenly and fully across a specified container Felix回答。

但是虽然我已经这样做了，但它本身确实有效，但有一些链接在它们之间有非均匀的空格。我没有理由，老实说我不知道​​解决方案。我尝试过，一切似乎都很好。最后，我如何指定从哪里开始呢？我有一个标题，它与它重叠。

#nav {
    display: table;
    height: 87px;
    width: 70%;
}

#nav li {
    display: table-cell;
    height: 87px;
    line-height: 87px;
    text-align: center;
    width: 12.5%;  /* (100 / numItems)% */
}

.link {
    min-width: 60px;
    min-height: 30px;
    background: #666;
    color: #FFF;
    text-decoration: none;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
    position: absolute;
    user-select: none;
    top: 50%;
    margin-top: -15px;
    text-align: center;
    line-height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    display: table-cell;
    white-space: nowrap; 
}

.link:hover {
    background: #999;
    text-decoration: none;
    color: #FFF;
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
    border: 1px solid #d0d0d0;
}

.link:active {
    background: #999;
    text-decoration: none;
    color: #FFF;
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

.menubar {
    position: absolute;
    right: 10%;
    left: 10%;
    margin: auto;
    overflow: auto;
    border: none;
    color: rgba(0,0,0,0.9);
    background: #666;
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.2) ;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.2) ;
    height: 60px;
    overflow: hidden;
}

<div class="menubar">
 <div class="links">
  <ul id="nav">
   <li><a href="/index.php" class="link">Home</a></li>
   <li><a href="/forums" class="link">Forums</a></li>
   <li><a href="/aboutus.php" class="link">About Us</a></li>
   <li><a href="/submit.php" class="link">Submit</a></li>
   <li><a href="/downloads.php" class="link">Downloads</a></li>
   <li><a href="/archive.php" class="link">Archive</a></li>
   <li><a href="/other.php" class="link">Other</a></li>
  </ul>
 </div>
</div>

如果您需要容器代码，请告诉我，如果需要，请告知我们。

Answer 1

由于您已经要求提供基于CSS flexbox的解决方案，因此我对您的代码进行了一些更改以实现此目的。我所做的更改的快速列表：

• 删除CSS中的所有display: table属性
• 将#nav声明为弹性项目，并确保禁用包装（因此内容不会换行到新行）
• 将#nav li声明为Flex项目的子项，并允许它们使用flex-grow: 1增长。这将允许这些元素在必要时进行扩展（即，在计算<li>元素的所有宽度后，父元素中存在未分配的空间。
• 删除了<a>链接中的绝对定位，因为这会从文档流中取出元素，从而阻止正确的高度计算。另外，将它们声明为块级元素（因此它们会填充父级<li>

对于视觉改进（但不是功能所必需的），我建议在非悬停链接上使用透明边框。这可以防止悬停元素（应用1px边框）的抖动。

如果没有热情，请参阅以下代码段：

#nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  width: 70%;
  list-style: none;
}

#nav li {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  text-align: center;
}

.link {
  border: 1px solid transparent;
  min-width: 60px;
  min-height: 30px;
  background: #666;
  color: #FFF;
  text-decoration: none;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  user-select: none;
  text-align: center;
  line-height: 30px;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  display: block;
  white-space: nowrap; 
}

.link:hover {
  background: #999;
  text-decoration: none;
  color: #FFF;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  border: 1px solid #d0d0d0;
}

.link:active {
  background: #999;
  text-decoration: none;
  color: #FFF;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

@media (max-width: 767px) {
  #nav {
    flex-wrap: wrap;  
  }
  #nav li {
    width: 100%;
  }
}

.menubar {
  position: absolute;
  right: 10%;
  left: 10%;
  margin: auto;
  overflow: auto;
  border: none;
  color: rgba(0,0,0,0.9);
  background: #666;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.2) ;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.2) ;
  overflow: hidden;
}

<div class="menubar">
 <div class="links">
  <ul id="nav">
   <li><a href="/index.php" class="link">Home</a></li>
   <li><a href="/forums" class="link">Forums</a></li>
   <li><a href="/aboutus.php" class="link">About Us</a></li>
   <li><a href="/submit.php" class="link">Submit</a></li>
   <li><a href="/downloads.php" class="link">Downloads</a></li>
   <li><a href="/archive.php" class="link">Archive</a></li>
   <li><a href="/other.php" class="link">Other</a></li>
  </ul>
 </div>
</div>