Saya mempunyai bar navigasi dan apabila menuding mana-mana item dalam senarai saya menambah garis merah di bahagian bawah tetapi saya mahu mengalihkan garis merah itu di bawah tajuk (contohnya "Perkhidmatan"), ada idea bagaimana untuk mencapai ini?
Saya menambah contoh kecil dalam codepen supaya anda boleh memeriksa kod HTML dan CSS dengan mudah
header {
background-color: lightblue;
padding-top: 1rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li:hover {
height: 100%;
border-bottom: 2px solid red;
}
<header>
<a href="/">
<p>Whatever logo</p>
</a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
<a href="/">CONTACT</a>
</header>
Pautan untuk melihat kod
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya rasa hanya berikan semua elemen senarai ketinggian yang sama dengan pengepala.
Seperti ini:-
header { background-color: lightblue; padding-top: 1rem; height: 3rem; position: sticky; top: 0; display: flex; align-items: center; justify-content: space-around; } header nav { min-width: 50%; height : 100%; } header nav ul { margin: 0; height: 100%; list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: space-between; } header li{ height: inherit; } header li:hover { border-bottom: 2px solid red; }Whatever logo
CONTACTAnda boleh membetulkan ketinggian pengepala dan anda juga boleh membetulkan ketinggian item bar navigasi. Selain itu, anda mempunyai masalah apabila elemen li bergerak pada tuding. Anda juga boleh menyelesaikan masalah ini dengan sentiasa menambah sempadan warna lutsinar pada elemen supaya ketinggian keseluruhan elemen tidak berubah pada tuding.
Ini adalah CSS tetap
header { background-color: lightblue; position: sticky; display: flex; height: 60px; align-items: center; justify-content: space-around; } header nav { min-width: 50%; } header nav ul { margin: 0; height: 100%; list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: space-between; height: 60px; } header li { display: flex; align-items: center; border-bottom: 2px solid transparent; height: 60px; } header li:hover { border-bottom: 2px solid red; }https://codepen.io/swarajgk/pen/JjZewPo?editors=1100