简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
固定的导航栏代码不太好，它导致链接断开的问题，我不知道为什么
P粉004287665
P粉004287665 2024-04-04 09:09:20
0
1
342

我不太确定如何解释这个问题，但本质上，我的固定导航栏要么不滚动，但超链接起作用，要么导航栏滚动，但超链接不起作用。当我尝试在 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粉004287665
P粉004287665

全部回复(1)
P粉709307865
P粉7093078652024-04-05 00:58:51 1 楼

哦，我注意到的第一件事是，每个 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
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！