Question

我正在尝试在页面顶部创建一个菜单，如教程中所示，但是菜单图标未到达页面左侧。

我尝试编辑margin和padding标签，但是没有任何效果。 Here is the link to the tutorial

.nav-main {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: #FFF;
  display: flex;
  flex-wrap: wrap;
  z-index: 1000;
}

.btn-toggle-nav {
  width: 60px;
  height: 60px;
  background-color: #F98F39;
  background-image: url("https://via.placeholder.com/500");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  cursor: pointer;
}

.nav-sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 50px;
  height: calc(100vh - 60px);
  padding: 0 5px;
  background-color: #1B1B1B
}

<nav class="nav-main">
  <div class="btn-toggle-nav"></div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Biography</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<aside class="nav-sidebar">
  <ul>
    <li><span href="#">More</span></li>
    <li><a href="#">Original Write-Up</a></li>
    <li><a href="#">Procedure</a></li>
    <li><a href="#">Why We Started</a></li>
    <li><a href="#">What We Hope To Accomplish</a></li>
  </ul>
</aside>

因此，所有内容均显示完美，但主div稍微偏右，而左侧则留有空白。但是侧边栏与左侧完全对齐，从而使页面看起来与菜单图标和侧边栏彼此不对齐。

Answer 1

由于历史原因，所有浏览器在很多方面都具有body标签的偏移量。最简单的方法是先将所有内容重置为零边界。您没有byselv，这是一个常见问题。所以有人已经解决了。也许尝试此链接Normalize Github

有些将所有内容重置为零脚本的方法。因此，尝试一下，看看差距是否消失了。如果是这样，您就知道这是浏览器的默认问题：）

Div元素未到达浏览器页面的左侧

1 个答案: