Question

我目前正在使用复选框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％。

Answer 1

您的身体元素有余量。添加：

body {
  margin: 0;
}

您的ul元素上还有默认的边距和填充，它们也被设置为width: 100%;

我建议检查所有主容器，当您在可能不考虑的元素上有额外间距时，在浏览器的检查器中查看它们会突出显示。

Div宽于视口

1 个答案: