简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

固定的導覽列程式碼不太好，它導致連結斷開的問題，我不知道為什麼

我不太確定如何解釋這個問題，但本質上，我的固定導覽列要么不滾動，但超連結起作用，要么導航欄滾動，但超連結不起作用。當我嘗試在 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 還很陌生，所以請隨意因為愚蠢的事情而羞辱我，但老實說我很難過。

P粉004287665P粉004287665180 天前348

全部回覆(1)我來回復

  • P粉709307865

    P粉7093078652024-04-05 00:58:51

    哦，我注意到的第一件事是，每個 li 元素後面都有 </li> 兩次:) 可能是一些自動完成。我不確定您所說的“固定導航欄不滾動，但超連結有效”是什麼意思？

    但是當我在 jsFiddle 中嘗試並添加

    
portfolio

    它對我來說效果很好（忽略 <br/>s 我只是懶惰：D） https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj

    #編輯：我知道你寫過你將刪除它，但為了確定- 只有<ul> 需要list-style-type: none; :) 我玩了一下你的css，我建議多使用flex而不是float，它更安全，但這可能只是我的偏好，希望你不要介意。 

    .navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

.navbar-nav {
  display: flex;
  gap: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
}

li a {
  display: inline-block;
  color: #666;
  text-decoration: none;
  padding: 14px;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #04AA6D;
}

    回覆
    0
  • 取消回覆