我正在嘗試使用帶有 CSS 的回應式導航欄，但復選框未在最大寬度為 760 像素的媒體查詢設定中顯示隱藏的導航欄，我提供了完整的導航欄代碼供您查看問題在哪里，請在我使用的螢屏設定中檢查我的代碼，我知道他有問題，但在哪里？我不知道。我會很感激的。
#navigationBar {
width: 100%;
margin: 80px 0;
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
}
#navBarLogo,
#navigationBar ul {
width: 50%;
display: flex;
}
#navBarLogo img {
width: 25%;
}
#navigationBar ul li {
margin-right: 10%;
list-style: none;
}
li a {
text-decoration: none;
color: aliceblue;
}
li a:hover {
color: #ea6731;
transition: 0.5s;
}
@media(max-width:760px){
#navigationBar {
width: 100%;
margin: 50px 0;
display: block;
}
#navBarLogo {
width: 100%;
display: block;
padding: 0;
}
#navigationBar ul {
display: none;
}
#navBarLogo img {
width: 15%;
}
.nav-toggle:checked ~ #navigationBar ul{
width: 100%;
display: block;
padding: 0;
}
#navigationBar ul li {
margin: 0;
list-style: none;
}
}<div id="navigationBar">
<div id="navBarLogo">
<a href="index.html"><img src="imgs/navBarLogo.png"></a>
</div>
<input type="checkbox" class="nav-toggle"/>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Portfolio</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>uj5u.com熱心網友回復：
問題：
- 第 50 行：
.nav-toggle:checked ~ #navigationBar ul {應該.nav-toggle:checked ~ ul {洗掉#navigationBar.
為什么？您不能從子元素中選擇父選擇器，并且.nav-toggle是#navigationBar.
- 第 41 行：
#navigationBar ul {應該只是ul {洗掉#navigationBar. 亦如上10號線#navigationBar ul {是唯一ul {
為什么？當我們修復第 50 行并使用.nav-toggle:checked ~ ul我們需要使用ul而不是#navigationBar ul因為第 41 行將覆寫我們在第 41 行的樣式，因為它在CSS 特異性中的優先級更高。
PROTIP：我建議給它ul一個類menu-items而不是依賴ul選擇器以避免與ul您網站中的其他人發生任何沖突
完全作業代碼：
#navigationBar {
width: 100%;
margin: 80px 0;
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
}
#navBarLogo,
ul {
width: 50%;
display: flex;
}
#navBarLogo img {
width: 25%;
}
#navigationBar ul li {
margin-right: 10%;
list-style: none;
}
li a {
text-decoration: none;
color: aliceblue;
}
li a:hover {
color: #ea6731;
transition: 0.5s;
}
@media (max-width: 760px) {
#navigationBar {
width: 100%;
margin: 50px 0;
display: block;
}
#navBarLogo {
width: 100%;
display: block;
padding: 0;
}
ul {
display: none;
}
#navBarLogo img {
width: 15%;
}
.nav-toggle:checked ~ ul {
width: 100%;
display: block;
padding: 0;
}
#navigationBar ul li {
margin: 0;
list-style: none;
}
}<div id="navigationBar">
<div id="navBarLogo">
<a href="index.html"><img src="imgs/navBarLogo.png"></a>
</div>
<input type="checkbox" class="nav-toggle" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Portfolio</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400000.html
下一篇：CSS@media問題