我想知道为什么我不能在乞求信息的时候打个招呼？它正在被自动移除。无论如何，在本课之后，我试图制作一个仅限css的滑出菜单：
https://www.youtube.com/watch?v=d4P8s-mkMvs&list=PLqGj3iMvMa4L8L9p0bCpBn6A5lwKxqwqR
但不知什么原因，这对我不起作用。想法是-当点击菜单图标时，复选框被选中，菜单应该将其左边距从-200改为0。但事实并非如此。
有什么帮助吗？
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
nav {
height: 100%;
position: fixed;
margin-left: -200px;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
#menustate {
margin-left: 400px;
}
#menustate:checked + .page-wrap .sidebar{
margin-left: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<nav class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Cities</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<label for="menustate"><p class="menuicon" href="">☰</p></label>
<div class="check">
<input type="checkbox" id="menustate" value="">
</div>
</div>
</body>
</html>最佳答案
Css+运算符
使用css+运算符时。下一个应该是兄弟姐妹
彼此之间。
增加过渡，使它看起来更好。
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
nav {
height: 100%;
position: fixed;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
.sidebar {
margin-left: -200px;
transition: margin-left 1s;
}
#menustate:checked + .sidebar {
margin-left: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<label for="menustate">
<p class="menuicon" href="">☰</p>
</label>
<input type="checkbox" id="menustate" value="">
<nav class="sidebar">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Products</a>
</li>
<li><a href="#">Cities</a>
</li>
<li><a href="#">Contacts</a>
</li>
</ul>
</nav>
</div>
</body>
</html>