我不太確定如何解釋這個問題,但本質上,我的固定導覽列要么不滾動,但超連結起作用,要么導航欄滾動,但超連結不起作用。當我嘗試在 html 和 css 中修復它時,這個循環不斷發生。我真的很感激對此的一些幫助。
這是導覽列的 html:
<body> <nav class="navbar navbar-expand-lg fixed-top navbarScroll"> <div class="container"> <! <a class="navbar-brand" href="#">insertgenericnamehere</a> --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home</a></li> </li> <li class="nav-item"> <a class="nav-link" href="#About">About</a></li> </li> <li class="nav-item"> <a class="nav-link" href="#services">UX/UI</a></li> </li> <li class="nav-item"> <a class="nav-link" href="#Portfolio">Portfolio</a></li> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a></li> </li> </ul> </div> </div> </nav>
我發誓它在原子中看起來不那麼混亂
這是導覽列的 CSS:
我知道我有太多“清單樣式類型”,我仍然需要刪除多餘的。
ul { list-style-type: none; } { position: fixed; } .navbar { position: fixed; top: 0; width: 100%; list-style-type: none; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e7e7e7; background-color: #f3f3f3; } li { float: left; } li a { display: block; color: #666; text-align: center; padding: 14px 16px; text-decoration: none; list-style-type: none; } li a:hover:not(.active) { background-color: #ddd; } li a.active { color: white; background-color: #04AA6D; }
我對 html&css 還很陌生,所以請隨意因為愚蠢的事情而羞辱我,但老實說我很難過。
哦,我注意到的第一件事是,每個 li 元素後面都有
</li>
兩次:) 可能是一些自動完成。我不確定您所說的“固定導航欄不滾動,但超連結有效”是什麼意思?但是當我在 jsFiddle 中嘗試並添加
它對我來說效果很好(忽略
<br/>s
我只是懶惰:D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj#編輯:我知道你寫過你將刪除它,但為了確定- 只有
<ul>
需要list-style-type: none;
:) 我玩了一下你的css,我建議多使用flex而不是float,它更安全,但這可能只是我的偏好,希望你不要介意。