html - 链接之间的空间不均匀

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 的解决方案，因此我对您的代码进行了一些更改以实现这一点。我所做的更改的快速列表:

• 删除所有display: table CSS 中的属性
• 声明#nav作为 flex 元素，并确保禁用换行(因此内容不会换行)
• 声明#nav li作为 flex 元素的 child ，并允许他们使用 flex-grow: 1 成长.这将允许这些元素在必要时扩展(即，在计算完 <li> 元素的所有宽度后父元素中有未分配的空间时。
• 删除了 <a> 中的绝对定位链接，因为这会使元素脱离文档流，从而阻止正确的高度计算。此外，将它们声明为 block 级元素(因此它们填充父元素 <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>