Question

我有一个问题，一切正常工作，但显示：没有复选框不是，复选框仍然在那里我试图通过HTML属性设置它（我知道这不是一件好事，但是我已经为任何解决方案做好了准备），它有效，但滑入/滑出停止工作......我该怎么办？

 <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    
    <style type="text/css">
    	
    	
    	* {padding:0; margin:0;} 
      body { font-family:sans-serif; } 
    
      a { text-decoration: none; 
      	color:#00a5cc; } 
    
      li { list-style-type:none; } 
     header { height : 50px; 
      	margin:auto; 
      	width : 100%;
      	 border-bottom:1px solid #EEE; } 
    
      	#brand { float:left; 
      		line-height:50px;
      		 color:#E5DAC0; 
      		 font-size:25px;
      		  font-weight:bolder; } 
    
      	nav { width:100%; text-align:center; } 
      	nav a { display:block; padding: 15px 0;
      	 border-bottom: 1px solid #C3AA6E; color:#F0EADC; } 
    
    
      	nav a:hover { background:#E5DAC0; 
      		color :#FFF; } 
    
      	nav li:last-child a { border-bottom:none; } 
    
    
    	/**************************************************************
    	**************************************************************/
    
    	.menu{
    		width: 240px;
    		height: 100%;
    		position: absolute;
    		background: #a9a1f3;
    		left: -240px;
    		trensition: all .3s ease-in-out;
    		-webkit-transition: all .3s ease-in-out;
      		  -moz-transition: all .3s ease-in-out; 
      		  -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 
    
    	}
    
    .menu-icon{
    	padding: 10px 20px;
    	background: #000000;
    	color: #aa25e9;
    	cursor:pointer; 
      	float:right; 
      	margin-top:4px; 
      	border-radius:5px; } 
    }
    #menuToggle{
    	display: none;
    }
    #menuToggle:checked ~ .menu { position:absolute; left:0px; }
    </style>
    <body>
    <input type="checkbox" id="menuToggle">
    <label for="menuToggle" class="menu-icon">&#9776</label>
    	<header>
    		<div id="brand"> slide in out nav</div>
    	</header>
    
    	<nav class="menu">
    		<ul>
    			<li><a href="#">HOME</a></li> 
      		    <li><a href="#">ABOUT</a></li>
      		     <li><a href="#">WORK</a></li> 
      		     <li><a href="#">INSPIRATION</a></li> 
      		     <li><a href="#">BLOG</a></li> 
      		     <li><a href="#">CONTACT</a></li> 
    		</ul>
    
    	</nav>
    </body>
    </html>

Answer 1

您在.menu-icon的css中有一个错误，它有一个额外的}，这就是为什么它不起作用。

只需删除额外的}即可按预期工作。

此处的实例：https://jsfiddle.net/ay84zjjw/

希望这有帮助。

Answer 2

只是一个小错误，只是代码中的更多}。

.menu-icon{
    padding: 10px 20px;
    background: #000000;
    color: #aa25e9;
    cursor:pointer; 
    float:right; 
    margin-top:4px; 
    border-radius:5px; **}** 
}

 <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    
    <style type="text/css">
    	
    	
    	* {padding:0; margin:0;} 
      body { font-family:sans-serif; } 
    
      a { text-decoration: none; 
      	color:#00a5cc; } 
    
      li { list-style-type:none; } 
     header { height : 50px; 
      	margin:auto; 
      	width : 100%;
      	 border-bottom:1px solid #EEE; } 
    
      	#brand { float:left; 
      		line-height:50px;
      		 color:#E5DAC0; 
      		 font-size:25px;
      		  font-weight:bolder; } 
    
      	nav { width:100%; text-align:center; } 
      	nav a { display:block; padding: 15px 0;
      	 border-bottom: 1px solid #C3AA6E; color:#F0EADC; } 
    
    
      	nav a:hover { background:#E5DAC0; 
      		color :#FFF; } 
    
      	nav li:last-child a { border-bottom:none; } 
    
    
    	/**************************************************************
    	**************************************************************/
    
    	.menu{
    		width: 240px;
    		height: 100%;
    		position: absolute;
    		background: #a9a1f3;
    		left: -240px;
    		trensition: all .3s ease-in-out;
    		-webkit-transition: all .3s ease-in-out;
      		  -moz-transition: all .3s ease-in-out; 
      		  -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 
    
    	}
    
    .menu-icon{
    	padding: 10px 20px;
    	background: #000000;
    	color: #aa25e9;
    	cursor:pointer; 
      	float:right; 
      	margin-top:4px; 
      	border-radius:5px;
    }
    #menuToggle{
    	display: none;
    }
    #menuToggle:checked ~ .menu { position:absolute; left:0px; }
    </style>
    <body>
    <input type="checkbox" id="menuToggle">
    <label for="menuToggle" class="menu-icon">&#9776</label>
    	<header>
    		<div id="brand"> slide in out nav</div>
    	</header>
    
    	<nav class="menu">
    		<ul>
    			<li><a href="#">HOME</a></li> 
      		    <li><a href="#">ABOUT</a></li>
      		     <li><a href="#">WORK</a></li> 
      		     <li><a href="#">INSPIRATION</a></li> 
      		     <li><a href="#">BLOG</a></li> 
      		     <li><a href="#">CONTACT</a></li> 
    		</ul>
    
    	</nav>
    </body>
    </html>

display：none不适用于复选框css

2 个答案: