添加桌面布局时移动菜单中出现奇怪的底部边距（或 space）

Question

我正在为网站设计移动菜单（使用 codepen）。菜单的桌面布局已经写好了。

移动布局已编写，并且按预期运行良好。但是添加桌面布局后，移动布局的菜单底部出现了一个奇怪的space。桌面布局保持不变。

布局可以在以下位置找到：https://codepen.io/pcassima/pen/ZgWYOd 这仅包括菜单的 HTML 和样式。

我已经尝试在桌面布局中注释掉填充和边距，但这并没有删除 space。

我希望移动菜单的菜单栏底部没有space。

function hamburgerNav() {
  // Get the navigation list from the page
  let nav_list = document.getElementById("nav-list");
  // Get the hamburger from the page (to change the shape)
  let hamburger = document.getElementById("hamburger");

  // Add or remove the active class from the navigation list
  if (nav_list.classList.contains("active")) {
    nav_list.classList.remove("active");
  } else {
    nav_list.classList.add("active");
  }
  // Add or remove the active class from the hamburger
  if (hamburger.classList.contains("active")) {
    hamburger.classList.remove("active");
  } else {
    hamburger.classList.add("active");
  }
}

* {
  /* Unsetting the margin and padding for everything */
  margin: 0;
  padding: 0;
}

body {
  /* Setting the global font */
  font-family: Roboto, sans-serif;
}


/* Desktop layout */

nav {
  /* The global navigation container for the hamburger and navigation*/
  box-shadow: 3px 3px 6px 0 rgba(75, 75, 75, 0.64);
  background-color: #20dce1;
  text-align: center;
  display: block;
  z-index: 1;
  position: sticky;
  top: 0;
}

nav .hamburger {
  /* In desktop mode hide the hamburger */
  display: none;
}

.top-navbar {
  /* The container for the actual navigation */
  display: inline-block;
  width: 100%;
  margin-bottom: -4px;
}

.nav-list {
  /* The unordered list for the navigation links */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  /* The menu list items */
  float: left;
  width: 20%;
}

nav a {
  /* styles for the menu links */
  padding-top: 4px;
  padding-bottom: 6px;
  color: white;
  display: inline-block;
  font-weight: normal;
  font-size: 28px;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-top-accent {
  /* The top accents for the menu links (for the desktop view) */
  background-color: #e11c84;
  height: 4px;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 350ms ease-in-out;
}

.nav-list li:hover .nav-top-accent,
.nav-list .nav-active .nav-top-accent {
  /* Scaling the top accent bar for hover and the active link (current page)   */
  transform: scaleX(1);
}

@media screen and (max-width: 750px) {
  /* Mobile layout */
  nav .top-navbar {
    /* The container for the actual navigation */
    overflow: auto;
    width: 100%;
    margin: 0;
  }
  .nav-list li {
    /* The menu list items */
    /* Unsetting the float, from the desktop layout */
    float: none;
    width: 100%;
    margin-bottom: 4px;
  }
  nav .nav-top-accent {
    /* The top accents for the menu links (for the desktop view) */
    display: none;
  }
  nav a {
    /* styles for the menu links */
    text-align: center;
    font-size: 24px;
    padding: 0;
  }
  nav .nav-active {
    /* The active menu link (the current page) */
    background-color: #e11c84;
  }
  nav .nav-list {
    /* The default display is none (inactive) */
    display: none;
  }
  nav .nav-list.active {
    /* When the menu becomes active, display the menu links */
    display: block;
  }
  nav .hamburger {
    /* The container for the hamburger button */
    display: block;
    float: right;
    margin-right: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: center;
    cursor: pointer;
  }
  nav .hamburger.active #h-bar1 {
    /* When the menu becomes active, rotate the top bar */
    transform: translate(0, 250%) rotate(45deg);
  }
  nav .hamburger.active #h-bar2 {
    /* When the menu becomes active, scale the bar in the x-direction to 0 */
    transform-origin: 100% 50%;
    transform: scaleX(0);
  }
  nav .hamburger.active #h-bar3 {
    /* When the menu becomes active, rotate the bottom bar */
    transform: translate(0, -250%) rotate(-45deg);
  }
  nav .hamburger-bar {
    /* Styling for the individual bars for the hamburger */
    width: 40px;
    height: 4px;
    background-color: white;
    margin: 6px 0;
    /* Animating the transistions */
    transition: all ease-in-out 350ms;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Page Title</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
</head>

<body>
  <header>
    <h1 style="text-align:center; font-size:38px;margin:16px;">responsive menu</h1>
  </header>
  <nav>
    <!-- The construction for the hamburger (for mobile menus)-->
    <div class="hamburger" id="hamburger" onclick="hamburgerNav()">
      <div class="hamburger-bar" id="h-bar1"></div>
      <div class="hamburger-bar" id="h-bar2"></div>
      <div class="hamburger-bar" id="h-bar3"></div>
    </div>
    <!-- The actual nav-bar with the links-->
    <div class="top-navbar">
      <ul class="nav-list" id="nav-list">
        <li class="nav-active">
          <div class="nav-top-accent"></div>
          <a href="index.html">home</a>
        </li>
        <li>
          <div class="nav-top-accent"></div>
          <a href="#">projects</a>
        </li>
        <li>
          <div class="nav-top-accent"></div>
          <a href="#">tutorials</a>
        </li>
        <li>
          <div class="nav-top-accent"></div>
          <a href="#">about</a>
        </li>
        <li>
          <div class="nav-top-accent"></div>
          <a href="#">contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <h1 style="margin:8px;">A responsive menu</h1>
  <p style="margin:8px;">A responsive menu for mobile and desktop. On desktop the menu has a hover animation, while on mobile there is an animated hamburger button to open the menu.</p>

</body>

</html>

Answer 1

如果我理解正确，那么如果您删除 .top-navbar class 上的显示 inline-block，您应该可以直观地看到 space 是 gone/removed .

仅供参考：只有当您的移动菜单处于活动状态时，您才应该删除它。在桌面版本上，这仍然是必要的。

添加桌面布局时移动菜单中出现奇怪的底部边距（或 space）

Strange bottom margin (or space) in mobile menu when adding desktop layout

html

css

mobile

responsive-design

codepen