suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Der Navigationsleistencode war nicht so gut, er verursachte Probleme mit defekten Links, ich weiß nicht warum

Ich bin nicht wirklich sicher, wie ich dieses Problem erklären soll, aber im Wesentlichen scrollt meine feste Navigationsleiste entweder nicht, aber die Hyperlinks funktionieren, oder die Navigationsleiste scrollt, aber die Hyperlinks funktionieren nicht. Diese Schleife tritt immer wieder auf, wenn ich versuche, sie in HTML und CSS zu beheben. Ich würde mich wirklich über Hilfe freuen.

Dies ist der HTML-Code der Navigationsleiste: 

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

Ich schwöre, in Atomen sieht es nicht so chaotisch aus

Dies ist das CSS für die Navigationsleiste:

Ich weiß, dass ich zu viele „Listenstiltypen“ habe, ich muss die überflüssigen noch löschen. 

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;
}

Ich bin ziemlich neu in Sachen HTML und CSS, also beschäme mich ruhig für dumme Dinge, aber ehrlich gesagt bin ich traurig.

P粉004287665P粉004287665258 Tage vor493

Antworte allen(1)Ich werde antworten

  • 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;
}

    Antwort
    0
  • StornierenAntwort