Saya tidak begitu pasti bagaimana untuk menerangkan masalah ini, tetapi pada asasnya, navbar tetap saya sama ada tidak tatal tetapi hiperpautan berfungsi, atau tatal navbar tetapi hiperpautan tidak berfungsi. Gelung ini terus berlaku apabila saya cuba membetulkannya dalam html dan css. Saya amat menghargai bantuan mengenai perkara ini.
Ini ialah html bar navigasi:
<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>
Saya bersumpah ia tidak kelihatan begitu kemas dalam atom
Ini ialah CSS untuk bar navigasi:
Saya tahu saya mempunyai terlalu banyak "jenis gaya senarai", saya masih perlu memadamkan yang berlebihan.
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;
}
Saya agak baru dalam html&css jadi jangan ragu untuk memalukan saya untuk perkara bodoh, tetapi secara jujur saya sedih.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oh, perkara pertama yang saya perhatikan ialah setiap elemen li diikuti oleh
</li>dua kali :) Mungkin beberapa autolengkap. Saya tidak pasti apa yang anda maksudkan dengan "navbar tetap tidak menatal, tetapi hiperpautan berfungsi" ?Tetapi apabila saya mencuba dalam jsFiddle dan menambah
Ia sangat berkesan untuk saya (abaikan
<br/>sSaya hanya malas :D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSjEDIT: Saya tahu anda menulis anda akan mengalih keluarnya, tetapi hanya untuk memastikan - hanya
<ul>需要list-style-type: none;:) Saya bermain-main dengan css anda dan saya akan mengesyorkan menggunakan flex daripada float, ia lebih selamat, tetapi itu mungkin saya Keutamaan, harap anda tidak keberatan..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; }