Question

我正在尝试获取页面导航栏的图像，以链接回网站的首页。我尝试使用下面的代码，但是由于某些原因，只有图像的顶部是可单击的。我已经对其进行了检查并尝试了很长时间，但找不到任何看起来不合适或语法错误的内容。

有什么我可以解决的问题吗？

nav {
  height: 85px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background: none;
  padding-left: 60px;
  padding-right: 60px;
  user-select: none;
  transition: 0.5s ease-in-out;
  z-index: 100;
}

nav img {
  height: 70px;
  margin-top: 5px;
}

nav a:hover {
  color: var(--primary) !important;
  transition: 0.15s;
}

nav img {
  margin: 0px;
}

nav .responsive-nav {
  display: none;
}

nav .right {
  position: fixed;
  top: 27px;
  right: 60px;
  width: 100%;
  text-align: right;
  height: 85px;
  text-transform: uppercase;
}

nav .right ul {
  position: fixed;
  top: 27px;
  right: 60px;
  width: 100%;
  height: 85px;
  margin-top: 0px;
}

nav .right li {
  margin-top: 7px;
}

nav .right a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  margin-left: 20px;
}

nav h1 a {
  text-decoration: none;
  color: #ffffff;
  transition: 0.15s;
}

nav h1 a:hover {
  color: var(--primary);
  transition: 0.15s;
}

nav .menu {
  display: none;
  position: fixed;
  top: 18px;
  right: 30px;
  font-size: 25px;
  border: 2px solid var(--primary);
  border-radius: 5px;
  padding: 5px;
  color: var(--primary);
  cursor: pointer;
}

<nav>
    <a href="/"><img src="https://www.gsr-technology.co.uk/wp-content/uploads/2015/10/partner-logo-placeholder.jpg" /></a>
    <div class="right">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/services.html">Services</a></li>
      </ul>
    </div>
    <i class="fas fa-bars menu"></i>
  </nav>

Answer 1

在上面的代码nav .right和nav .right ul中，宽度均为100％；删除它，然后尝试完成，整个图片将可以点击。

如何修复无效的图片链接？

1 个答案: