Question

我有一个“当前”类，突出显示当前页面。它的工作原理是突出显示当前页面。我添加了填充，突出显示的区域覆盖了a元素，并朝着页面顶部移动，这是我想要它做的。但每个突出显示的区域是a元素的宽度，并且由于每个a元素在其中具有不同数量的字符，因此宽度不一致。

为了纠正这个问题，我给了a-element 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; 
    }

当前页面宽度不一致

1 个答案: