我试图让我的菜单在选中我的切换复选框时显示,但是不会。我知道为什么我的.menu-container不是我的toggle元素的兄弟,但是,我不知道如何在不将div移出div的情况下使其正常工作,因此我的.menu-container可以直接进行。我仍在学习Javascript(我是三年级),因此可以理解,可以做到这一点,但是CSS是目前我的前进方向,除非您对js有一个简单的解释/解决方案。
我希望这是有道理的。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.nav-container {
position: fixed;
top: 0;
width: 100vw;
/*border: 1px solid red;*/
}
.toggle-container {
display: flex;
justify-content: flex-end;
/*border: 1px solid blue;*/
/*margin: 20px;*/
}
.menu-container {
display: flex;
justify-content: flex-end;
margin: 20px 30px 20px 20px;
}
.menu-item {
padding: 0 10px;
font-size: 1.1em;
}
#toggle {
display: none;
}
.toggle {
display: none;
font-size: 1.8em;
padding: 15px 30px 10px 0;
}
/*.menu-container {
display: flex;
flex-direction: column;
border: 1px solid green;
align-items: center;
}
*/
@media only screen and (max-width: 500px) {
.toggle {
display: block;
}
.menu-container {
flex-direction: column;
margin: 0;
border-top: 1px solid gray;
display: none;
}
.menu-item {
padding: 8px;
width: 100vw;
text-align: center;
border-bottom: 1px solid gray;
}
#toggle:checked+.menu-container {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Bundles</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Comptible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mynavtext.css">
<link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
</head>
<body>
<nav class="nav-container">
<div class="toggle-container">
<label class="toggle" for="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="toggle">
</div>
<div class="menu-container">
<a class="menu-item" href="#">Categories</a>
<a class="menu-item" href="#">How It Works</a>
<a class="menu-item" href="#">Log In</a>
<a class="menu-item" href="#">Register</a>
</div>
</nav>
</body>
</html>
谢谢
答案 0 :(得分:-1)
在现在的html结构中,css无法解决。将input
元素移到div
元素之外,此问题已解决。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.nav-container {
position: fixed;
top: 0;
width: 100vw;
/*border: 1px solid red;*/
}
.toggle-container {
display: flex;
justify-content: flex-end;
/*border: 1px solid blue;*/
/*margin: 20px;*/
}
.menu-container {
display: flex;
justify-content: flex-end;
margin: 20px 30px 20px 20px;
}
.menu-item {
padding: 0 10px;
font-size: 1.1em;
}
#toggle {
display: none;
}
.toggle {
display: none;
font-size: 1.8em;
padding: 15px 30px 10px 0;
}
/*.menu-container {
display: flex;
flex-direction: column;
border: 1px solid green;
align-items: center;
}
*/
@media only screen and (max-width: 500px) {
.toggle {
display: block;
}
.menu-container {
flex-direction: column;
margin: 0;
border-top: 1px solid gray;
display: none;
}
.menu-item {
padding: 8px;
width: 100vw;
text-align: center;
border-bottom: 1px solid gray;
}
#toggle:checked+.menu-container {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Bundles</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Comptible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mynavtext.css">
<link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
</head>
<body>
<nav class="nav-container">
<div class="toggle-container">
<label class="toggle" for="toggle"><i class="fas fa-bars"></i>icon</label>
</div>
<input type="checkbox" id="toggle">
<div class="menu-container">
<a class="menu-item" href="#">Categories</a>
<a class="menu-item" href="#">How It Works</a>
<a class="menu-item" href="#">Log In</a>
<a class="menu-item" href="#">Register</a>
</div>
</nav>
</body>
</html>