为什么我的某些标题链接不起作用？

Question

我有一个带有 3 个导航链接 (ul)、一个徽标和 3 个社交媒体图标 (ul) 的标题。所有这些元素都带有<a> 标签，但是，虽然徽标和图标的 href 似乎工作得很好，但导航链接却没有，我不明白为什么。

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: rgba($color: #000000, $alpha: .9);
  backdrop-filter: blur(30px);
  min-height: 40px;
  text-align: center;
  padding-top: calc(10px + 1vw);
  padding-bottom: calc(10px + 1vw);
  padding-left: 5%;
  padding-right: 5%;
  margin: 0%;
  z-index: 999;
  &:hover {
    cursor: default;
  }
  #navBar {
    float: left;
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 2vw;
    z-index: 1000;
    li {
      list-style: none;
      padding: 5px;
      padding-right: 10px;
      padding-left: 10px;
      &:hover {
        cursor: pointer;
        background-color: $secondary-color;
      }
    }
  }
  #navSocial {
    display: flex;
    flex-direction: row;
    gap: 2vw;
    float: right;
    list-style: none;
    margin-right: 15%;
    li {
      margin: auto;
      img {
        height: 30px;
      }
    }
  }
  .logo {
    position: absolute;
    left: 47.1vw;
    margin: auto;
    img {
      width: 5vw;
      min-width: 40px;
    }
  }
}

<div id="header">
  <ul id="navBar">
    <li>
      <a href="#about"></a>
      <p>About</p>
      </a>
    </li>
    <li>
      <a href="#works"></a>
      <p>Works</p>
      </a>
    </li>
    <li>
      <a href="#footer"></a>
      <p>Contacts</p>
      </a>
    </li>
  </ul>
  <a href="" class="logo"><img src="svg/logo.svg" alt="Menu"></a>
  <ul id="navSocial">
    <li>
      <a href="https://www.instagram.com/" target="blank"><img src="svg/instagram.svg" alt="Menu"></a>
    </li>
    <li>
      <a href="behance.html" target="blank"><img src="svg/behance.svg " alt="Menu"></a>
    </li>
    <li>
      <a href="https://www.linkedin.com/"><img src="svg/linkedin.svg" alt="Menu"></a>
    </li>
  </ul>
</div>

Answer 1

您正在关闭没有任何文本的链接标签：

<a href="#about"></a>

在您拥有的链接之后

<p>About</p></a>

它确实有一个结束标记 </a> 不存在开始标记，因为它打算关闭的链接在 <p> 打开之前已经关闭。

非常正确

<a href="#about"></a><p>About</p></a>
<!--             ^^^^ remove the above -->

到

<a href="#about"><p>About</p></a>

关于链接之后的其他 2 个链接也是如此。

Answer 2

您发布的标记因带有 </a> 等附加标签而无效 格式化的一个好处是，当标记格式不正确时，它可以直观地显示出来。

尝试将鼠标悬停在此处的链接上，以查看与原始链接的区别。

我在此处的 sn-p 中调整了您的 HTML：

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: rgba($color: #000000, $alpha: .9);
  backdrop-filter: blur(30px);
  min-height: 40px;
  text-align: center;
  padding-top: calc(10px + 1vw);
  padding-bottom: calc(10px + 1vw);
  padding-left: 5%;
  padding-right: 5%;
  margin: 0%;
  z-index: 999;
  &:hover {
    cursor: default;
  }
  #navBar {
    float: left;
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 2vw;
    z-index: 1000;
    li {
      list-style: none;
      padding: 5px;
      padding-right: 10px;
      padding-left: 10px;
      &:hover {
        cursor: pointer;
        background-color: $secondary-color;
      }
    }
  }
  #navSocial {
    display: flex;
    flex-direction: row;
    gap: 2vw;
    float: right;
    list-style: none;
    margin-right: 15%;
    li {
      margin: auto;
      img {
        height: 30px;
      }
    }
  }
  .logo {
    position: absolute;
    left: 47.1vw;
    margin: auto;
    img {
      width: 5vw;
      min-width: 40px;
    }
  }
}

<div id="header">
  <ul id="navBar">
    <li>
      <a href="#about">
        <p>About</p>
      </a>
    </li>
    <li>
      <a href="#works">
        <p>Works</p>
      </a>
    </li>
    <li>
      <a href="#footer">
        <p>Contacts</p>
      </a>
    </li>
  </ul>
  <a href="" class="logo"><img src="svg/logo.svg" alt="Menu"></a>
  <ul id="navSocial">
    <li>
      <a href="https://www.instagram.com/" target="blank"><img src="svg/instagram.svg" alt="Menu"></a>
    </li>
    <li>
      <a href="behance.html" target="blank"><img src="svg/behance.svg " alt="Menu"></a>
    </li>
    <li>
      <a href="https://www.linkedin.com/"><img src="svg/linkedin.svg" alt="Menu"></a>
    </li>
  </ul>
</div>