需要帮助删除导航栏上的空白答案

【问题标题】：Need assistance removing white space on nav bar需要帮助删除导航栏上的空白
【发布时间】：2017-08-31 14:01:56
【问题描述】：

很难使用这个 CSS 代码...不幸的是，我无法弄清楚为什么我在导航栏底部保留一个白行。任何帮助将不胜感激。

我使用 Inspector 工具来隔离空间所属的元素，但我没有与之关联的边框、填充或边距。

#myNavigation,
.collapse {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  background-color: #2e3391;
}

#menu {
  margin: 0 10%;
  border: 0;
  padding: 0;
  text-align: center;
}

#menu li a {
  text-align: center;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-decoration: none;
  padding: 10px;
  background-color: #666;
  color: #a4c1eb;
  border-bottom: 1px;
  border-bottom-color: #000;
  border-bottom-style: solid;
}

#menu li a:hover {
  background-color: #a4c1eb;
  color: #2e3391;
  padding-bottom: 12px;
  border-bottom: 5px;
  border-bottom-color: #f4f4f4;
  border-bottom-style: solid;
  margin: -1px;
}

<body>
  <div id="myNavigation">
    <nav id="menu" class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-ex1-collapse">
    				<span class="sr-only">Toggle navigation</span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
        <!-- <a class="navbar-brand" href="#"></a> -->
      </div>

      <!-- Collect the nav links, forms, and other content for 
    toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id="menu-nav" class="nav navbar-nav">
          <li class="active"><a href="#home-slider">Home</a></li>
          <li><a href="#about">About </a></li>
          <li><a href="#join">How To </a></li>
          <li><a href="#support">Support</a></li>
          <li><a href="#media">News &amp; Media</a></li>
          <li><a href="#events">Schedules &amp; Events</a></li>
          <li><a href="#alumni">The Corner</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </nav>
  </div>
</body>

</html>

【问题讨论】：

如果有帮助，请不要忘记给答案投票。谢谢！ :)

标签： html css

【解决方案1】：

Bootstrap 在 .navbar 类上有一个 50px 的 min-height。由于您的导航是 41 像素，因此下面会显示一个额外的空格，https://jsfiddle.net/smhtp5c8/1/

只需更新您的 CSS，

#menu {
    ...
    min-height: 0;
}

【讨论】：

【解决方案2】：

@user8379561 要么你必须覆盖 .navbar css，要么你也可以像上面那样使用 css 特异性。

【讨论】：