html - 2 之间的幻象空白

Question

为新站点设计构建了一个简单的无下拉式水平导航，它的所有功能都像往常一样正常工作，除了两个按钮之间是一个幻象的空白区域，它没有出现在蜻蜓的指标或代码中，但可见当 li 的悬停规则适用时在屏幕上。并且它不会出现在每个 li 之间，只出现在 2 个特定 li 之间。我附上了下面的图片，显示了我的意思:

没问题，一切看起来都应该如此:

在悬停的 li 的右侧是一个不应该存在的空白 px:

    .navi {
      display: inline-block;
      height: 50px;
      max-height: 50px;
      overflow: hidden;
      list-style: none;
      float: right;
    }
    .navi li {
      float: left;
    }
    .navi li a {
      padding: 16px;
      border-left: 1px solid #8bd854;
      font-size: 16px;
      text-decoration: none;
      line-height: 50px;
      color: #8c8c8c;
      transition: all 0.5s ease;
    }
    .navi li a:hover {
      background-color: rgba(13, 137, 0, 0.61);
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
      color: #fff;
    }

<ul class="navi">
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Lawn Care</a></li>
  <li><a href="">Tree &amp; Shrub Removal</a></li>
  <li><a href="">Contact</a></li>
</ul>

知道这可能来自哪里吗？如果不能解决，这不是什么大问题，但这很烦人。

提前致谢

Answer 1

解决这个问题的一个简单方法是使用font-size:

.navi {
    font-size: 0;
}

.navi li {
    font-size: 1rem;
}

这会将列表的字体大小设置为零，并将列表元素的字体大小设置为根元素的大小(您可以使用任何其他单位——除了em——如果你想).