Question

我正在建立带有文本和图标的导航栏，但随着鼠标的悬停而改变了背景颜色，但是我对图标背景的高度有疑问。我希望它们与文本具有相同的高度，但我不知道为什么它们的背景更大。

如您所见，图标的背景和文本的背景之间存在微小差异。我找到了一种解决方案，该解决方案为图标添加了一个负的底边距，但是这样图标就不会居中。另一种可能的解决方案是为锚点增加高度，但在这种情况下，文本不会居中。我不明白狭小的空间，锚点无法像对文本一样对图像进行自我调整，我也不知道为什么。您知道解决此问题的更好方法吗？

这是我的导航栏的HTML和CSS代码：

nav
{
  font-family: 'Playfair Display', serif;
  width: 100%;
  margin: 0;
}

nav ul
{
  background-color: #343A40;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li
{
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right
{
  float: right;
}


ul.topnav li a
{
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  min-height: 17px;
}

ul.topnav li a.active
{
  background-color: #00B5FF;
}

ul.topnav li a:hover
{
  background-color: #00B5FF;
}

ul.topnav li a img.icon
{
  margin: 0;
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

<nav>
      <ul class="topnav">
        <li><a class="active" href="index.html"><img class="icon" src="images/home.png" alt="icon"></a></li>
        <li><a href="acerca.html">Acerca</a></li>
        <li><a href="portafolio.html">Portafolio</a></li>
        <li class="topnav-right"><a href="https://github.com/BernardoAyala"><img class="icon" src="images/github.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.linkedin.com/in/bernardo-ayala-94630216a/"><img class="icon" src="images/linkedin.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.instagram.com/bernardoayalam/"><img class="icon" src="images/instagram.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://twitter.com/Bernardo_Ayala"><img class="icon" src="images/twitter.png" alt="icon"></a></li>
      </ul>
    </nav>

Answer 1

图像是导致导航栏长于应有的长度的原因。一种简单的方法是将导航栏悬停时的高度指定为与未悬停的导航栏相同。

nav
{
  font-family: 'Playfair Display', serif;
  width: 100%;
  margin: 0;
}

nav ul
{
  background-color: #343A40;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li
{
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right
{
  float: right;
}


ul.topnav li a
{
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  min-height: 17px;
}

ul.topnav li a.active
{
  background-color: #00B5FF;
}

ul.topnav li a:hover
{
  background-color: #00B5FF;
  height:20px;
}

ul.topnav li a img.icon
{
  margin: 0;
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

<nav>
      <ul class="topnav">
        <li><a class="active" href="index.html"><img class="icon" src="images/home.png" alt="icon"></a></li>
        <li><a href="acerca.html">Acerca</a></li>
        <li><a href="portafolio.html">Portafolio</a></li>
        <li class="topnav-right"><a href="https://github.com/BernardoAyala"><img class="icon" src="images/github.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.linkedin.com/in/bernardo-ayala-94630216a/"><img class="icon" src="images/linkedin.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://www.instagram.com/bernardoayalam/"><img class="icon" src="images/instagram.png" alt="icon"></a></li>
        <li class="topnav-right"><a href="https://twitter.com/Bernardo_Ayala"><img class="icon" src="images/twitter.png" alt="icon"></a></li>
      </ul>
    </nav>

Answer 2

我发现了问题所在。注意我的CSS的这一部分：

ul.topnav li a
{
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  min-height: 17px;
}

请注意，列表中的mi锚点填充为16px，该填充是我不知道它来自何处的额外空间。为了解决这个问题，我向该特定锚添加了一个类，然后更改其填充。

具有图像iside的锚点的高度比其余元素高

2 个答案: