我使用的是本教程，除了一些id/class名称之外，我做了与教程完全相同的操作，但我仍然无法完成检查。
我没有读完整个教程。我测试了这两个代码(我测试的代码：这里(，但问题似乎不是来自复选框。
这是HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>Test Sidebar</title>
</head>
<body>
<input type="checkbox" id="check">
<header>
<label for="check">
<i class="fas fa-bars" id="sidebarBtn"></i>
</label>
<div class="leftArea">
<h3>Side <span>Bar</span></h3>
</div>
<div class="rightArea">
<a href="#" class="logoutBtn">Logout</a>
</div>
<div class="sidebar">
<center>
<img src="pic.jpg" class="profileImage" alt="">
<h4>Amanda</h4>
</center>
<a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
<a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
<a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
<a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
<a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
<a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
</div>
</header>
</body>
</html>
这是CSS：
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
header {
position: fixed;
background: #22242A;
padding: 20px;
width: 100%;
height: 30px;
}
.leftArea h3 {
color: #fff;
margin: 0;
text-transform: uppercase;
font-size: 22px;
font-weight: 900;
}
.leftArea span {
color: #1DC4E7;
}
.logoutBtn {
padding: 5px;
background: #19B3D3;
text-decoration: none;
float: right;
margin-top: -30px;
margin-right: 40px;
border-radius: 2px;
font-size: 15px;
font-weight: 600;
color: #fff;
transition: 0.5s;
transition-property: background;
}
.logoutBtn:hover {
background: #0D9DBB;
}
.sidebar {
background: #2F323A;
margin-top: 22px;
/* margin-top: 70px - n'as pas l'air de fonctionner */
padding-top: 30px;
position: fixed;
left: 0;
width: 250px;
height: 100%
}
.sidebar .profileImage {
width: 100px;
height: 100px;
border-radius: 100px;
margin-bottom: 10px;
}
.sidebar h4 {
color: #ccc;
margin-top: 0;
margin-bottom: 20px;
}
.sidebar a {
color: #fff;
display: block;
width: 100%;
line-height: 60px;
text-decoration: none;
padding-left: 40px;
box-sizing: border-box;
transition: 0.5s;
transition-property: background;
}
.sidebar a:hover {
background: #19B3D3;
}
.sidebar i {
padding-right: 10px;
}
label #sidebarBtn {
z-index: 1;
color: #fff;
position: fixed;
cursor: pointer;
left: 300px;
font-size: 20px;
margin: 5px 0;
transition: 0.5s;
transition-property: color;
}
label #sidebarBtn:hover {
color: #19B3D3;
}
#check:checked ~ .sidebar {
left: -190px;
}
将<input type="checkbox" id="check">放在head标记内，但放在线<label for="check">上方。
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
header {
position: fixed;
background: #22242A;
padding: 20px;
width: 100%;
height: 30px;
}
.leftArea h3 {
color: #fff;
margin: 0;
text-transform: uppercase;
font-size: 22px;
font-weight: 900;
}
.leftArea span {
color: #1DC4E7;
}
.logoutBtn {
padding: 5px;
background: #19B3D3;
text-decoration: none;
float: right;
margin-top: -30px;
margin-right: 40px;
border-radius: 2px;
font-size: 15px;
font-weight: 600;
color: #fff;
transition: 0.5s;
transition-property: background;
}
.logoutBtn:hover {
background: #0D9DBB;
}
.sidebar {
background: #2F323A;
margin-top: 22px;
/* margin-top: 70px - n'as pas l'air de fonctionner */
padding-top: 30px;
position: fixed;
left: 0;
width: 250px;
height: 100%
}
.sidebar .profileImage {
width: 100px;
height: 100px;
border-radius: 100px;
margin-bottom: 10px;
}
.sidebar h4 {
color: #ccc;
margin-top: 0;
margin-bottom: 20px;
}
.sidebar a {
color: #fff;
display: block;
width: 100%;
line-height: 60px;
text-decoration: none;
padding-left: 40px;
box-sizing: border-box;
transition: 0.5s;
transition-property: background;
}
.sidebar a:hover {
background: #19B3D3;
}
.sidebar i {
padding-right: 10px;
}
label #sidebarBtn {
z-index: 1;
color: #fff;
position: fixed;
cursor: pointer;
left: 300px;
font-size: 20px;
margin: 5px 0;
transition: 0.5s;
transition-property: color;
}
label #sidebarBtn:hover {
color: #19B3D3;
}
#check:checked ~ .sidebar {
left: -190px;
}<body>
<header>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="sidebarBtn"></i>
</label>
<div class="leftArea">
<h3>Side <span>Bar</span></h3>
</div>
<div class="rightArea">
<a href="#" class="logoutBtn">Logout</a>
</div>
<div class="sidebar">
<center>
<img src="pic.jpg" class="profileImage" alt="">
<h4>Amanda</h4>
</center>
<a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
<a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
<a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
<a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
<a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
<a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
</div>
</header>
</body>好吧，我刚刚明白我把事情搞砸了。标记应该在rightArea类之后关闭。
<header>
<label for="check">
<i class="fas fa-bars" id="sidebarBtn"></i>
</label>
<div class="leftArea">
<h3>Side <span>Bar</span></h3>
</div>
<div class="rightArea">
<a href="#" class="logoutBtn">Logout</a>
</div>
</header>
这样，我就可以在我的头之前输入，这样就可以工作了。我想这是因为现在，侧边栏已经不在标题中了。这对我来说很愚蠢，对不起，谢谢你在那里帮助我。