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

Question

I have a header with 3 navigation links (ul), a logo, and 3 social media icons (ul). All of those elements come with an <a> tag but, while the logo and icon's href seem to work just fine, the nav links ones don't and I don't understand why.

 #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

You are closing the link tags without any text in them:

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

Directly after the link you have

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

which does have a closing tag </a> to which no opening tag exists because the link it was meant to close was closed already before the <p> opened.

So correct

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

to

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

Same goes for the other 2 links following your about link.

Answer 2

Your markup as posted is invalid with additional tags such as </a> One benefit of formatting is it shows visually when markup is not properly formed.

Try mouse-over of the links here to see the difference from the original.

I have adjusted your HTML in the snippet here:

 #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>