我目前正在使用复选框hack编写一个响应菜单,并注意到单击汉堡包图标后出现我的菜单时,它的宽度大于视口。菜单具有固定位置和柔性显示屏。我在元素周围添加了红色边框以显示此问题。这是相关代码:
/* General styles */
html, body { height: 100%; }
body {
font-family: 'Miriam Libre', sans-serif;
}
a {
color: white;
text-decoration: none;
transition: 0.2s;
}
a:hover {
color: #ea3c53;
}
/* Navigation styles */
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #222222;
}
.donate {
position: absolute;
margin: 21px;
}
nav .brand {
display: block;
height: 70px;
margin: 10px auto;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
nav label {
position: absolute;
top: 0;
right: 0;
padding: 21px;
background: #63E2C6;
cursor: pointer;
z-index: 2;
}
nav > label > span {
display: block;
margin: 4px auto;
height: 4px;
width: 25px;
border-radius: 1px;
background: #ffffff;
transition: 0.5s;
}
.menu {
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
top: -100vh;
left: 0;
height: 100vh;
width: 100%;
background: #222;
list-style-type: none;
border: 1px solid red;
transition: top 0.5s cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.menu li {
font-size: 30px;
border: 1px solid red;
}
input[type=checkbox]:checked ~ .menu {
top: 0;
}
<nav>
<!-- Top bar -->
<a href="link" target="_blank" class="donate">Donate</a>
<img src="media/logo2.png" alt="Logo" class="brand">
<input type="checkbox" id="nav">
<label for="nav">
<span></span>
<span></span>
<span></span>
</label>
<ul class="menu">
<li><a href="#home">Home.</a></li>
<li><a href="#mission">Mission.</a></li>
<li><a href="#contact">Contact.</a></li>
</ul>
</nav>
所以,我的问题是,为什么会这样?毕竟,我确实将宽度设置为100%,而不是110%。
答案 0 :(得分:1)
您的身体元素有余量。添加:
body {
margin: 0;
}
您的ul
元素上还有默认的边距和填充,它们也被设置为width: 100%
;
我建议检查所有主容器,当您在可能不考虑的元素上有额外间距时,在浏览器的检查器中查看它们会突出显示。