cari

Rumah  >  Soal Jawab  >  teks badan

Kod navbar tetap tidak begitu baik, ia menyebabkan masalah dengan pautan rosak, saya tidak tahu mengapa

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.

P粉004287665P粉004287665262 hari yang lalu505

membalas semua(1)saya akan balas

  • P粉709307865

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

    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 

    
portfolio

    Ia sangat berkesan untuk saya (abaikan <br/>s Saya hanya malas :D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj

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

    balas
    0
  • Batalbalas