Goodday,
我只是将此示例中的HTML和CSS复制到我自己的文档中:https://codepen.io/remilaudanski/pen/gbBGyN
但问题是我遇到了以下问题,你在链接上看不到:
我的代码与示例中的代码相同:
/* Générales */
body {background-color : #ededed; font-family : "Open Sans", sans-serif;}
h1 {padding: 40px; text-align: center; font-size: 1.5em;}
li a {text-decoration : none; color : #2d2f31;}
/* Nav */
nav {
width : 300px;
background: #d9d9d9; /* Couleur de fond des liens */
margin : 40px auto; /* Marge à virer */
}
/* Titre */
span {
padding : 30px;
background : #2d2f31; /* Couleur de l'en-tête */
color : white;
font-size : 1.2em;
font-variant : small-caps;
cursor : pointer;
display: block;
}
span::after {
float: right;
right: 10%;
content: "+";
}
/* Liste */
.slide {
clear:both;
width:100%;
height:0px;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.slide li {padding : 30px;}
/* Checkbox */
#touch {position: absolute; opacity: 0; height: 0px;}
#touch:checked + .slide {height: 300px;} /* Hauteur à gérer en fonction du nombre de liens */

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Dropdown Menu</h1>
<nav>
<label for="touch"><span>titre</span></label>
<input type="checkbox" id="touch">
<ul class="slide">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</nav>
</body>
</html>
&#13;
问题出在哪里?我究竟做错了什么?谁能帮我?感谢。
答案 0 :(得分:1)
您忘记重置margin
和padding
:
* {margin: 0; padding: 0;}
添加:
/* Générales */
* {margin: 0; padding: 0;}
body {
background-color: #ededed;
font-family: "Open Sans", sans-serif;
}
h1 {
padding: 40px;
text-align: center;
font-size: 1.5em;
}
li a {
text-decoration: none;
color: #2d2f31;
}
/* Nav */
nav {
width: 300px;
background: #d9d9d9;
/* Couleur de fond des liens */
margin: 40px auto;
/* Marge à virer */
}
/* Titre */
span {
padding: 30px;
background: #2d2f31;
/* Couleur de l'en-tête */
color: white;
font-size: 1.2em;
font-variant: small-caps;
cursor: pointer;
display: block;
}
span::after {
float: right;
right: 10%;
content: "+";
}
/* Liste */
.slide {
clear: both;
width: 100%;
height: 0px;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.slide li {
padding: 30px;
}
/* Checkbox */
#touch {
position: absolute;
opacity: 0;
height: 0px;
}
#touch:checked + .slide {
height: 300px;
}
/* Hauteur à gérer en fonction du nombre de liens */
<h1>CSS Dropdown Menu</h1>
<nav>
<label for="touch"><span>titre</span></label>
<input type="checkbox" id="touch">
<ul class="slide">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</nav>