当前页面宽度不一致

Question

我有一个突出当前页面的“当前”类。它可以突出显示当前页面。使用填充，我添加了突出显示的区域覆盖了 a 元素并朝向页面顶部，这是我想要它做的。但是每个突出显示的区域都是 a 元素的宽度，并且由于每个 a 元素中的字符数量不同，因此宽度是不一致的。

为了纠正这个问题，我给了 a 元素 display: block。这种更正确实提供了一致的宽度，但现在突出显示的区域向下朝向页面，而不是朝向页面顶部，因为我想要它。

如何使突出显示区域的宽度保持一致，以向上移动到页面顶部？

nav {
  margin: 100px auto;
}

.top-nav {
  width: 785px;
  color: dimgrey;
  text-align: center;
  margin: 0 auto;
}

.top-nav li {
  width: 150px;
  float: left;
  margin: 0 3px;
}

.top-nav a {
  color: dimgrey;
  width: 150px;
}

.current {
  padding: 150px 0px 5px 0px;
  background-color: #fab938;
  color: white;
}

span.fa-bath {
  font-size: 50px;
  margin-top: -45px;
  margin-bottom: 10px;
  border-radius: 100%;
  padding: 20px;
  background-color: #fab938;
}

<nav>
  <ul class="top-nav">
    <li><a href="index.html">Quem Somos</a></li>
    <li><a href="o-que-fazemos.html">O Que Fazemos?</a></li>
    <li><span class="fa fa-bath"></span></li>
    <li><a href="donations.html">Donations</a></li>
    <li><a href="contact.html" class="current">Contact</a></li>
  </ul>
</nav>

Answer 1

我会改变你构建导航的方式。 不要使用浮点数，而是在 LI 上使用内联块。 旁边你可以使用vertical-align: middle;从中间对齐项目或使用顶部/底部。 您的导航容器也不适合您使用的 5 Li 的大小。

https://jsfiddle.net/wyrscn48/1/

nav {
    margin: 100px auto; } 

.top-nav {
    width: 935px;
    color: dimgrey;
    text-align: center;
    margin: 0 auto;

     }

.top-nav li {
    width: 150px;
    margin: 0 3px;
    display: inline-block;
    vertical-align: top;
    }

.top-nav a {
    color: dimgrey; 
    width: 150px; }

.current {
    background-color: #fab938;
    color: white; }

span.fa-bath {
    font-size: 50px;
     margin-bottom: 10px;
    border-radius: 100%;
    padding: 20px;
    background-color: #fab938; 
    }