CSS导航栏重叠和填充问题答案

【问题标题】：CSS Navigation Bar overlapping and padding issuesCSS导航栏重叠和填充问题
【发布时间】：2020-04-01 01:14:42
【问题描述】：

所以我试图让边框底部悬停效果与父 div（导航栏）底部边框重叠。我有边距：0px 和填充：0px 的导航栏容器

不知道如何让悬停底部边框效果能够与父底部边框重叠。 here is what is currently looks like

【问题讨论】：

你能贴出你的代码吗？
@FahimKhan 好的，我已将其添加到帖子中！（在底部）让我知道 :)
那是图片，不是代码。阅读How to Ask 并创建一个合适的minimal reproducible example

标签： html css bootstrap-4 frontend padding

【解决方案1】：

您没有提供代码。然后我也试图理解你的问题。希望我理解正确并能解决您的问题。

li.nav-item {
    padding: 10px;
    position:relative;
}
li.nav-item:hover{
    border-bottom: 5px solid red;
    margin-bottom: -5px;
}
nav.navbar{
    border-bottom: 8px solid blue;
    padding: 0px !important;
}

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
      <ul class="navbar-nav mx-auto text-md-center">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item3</a>
        </li>
    </div>
  </nav>

【讨论】：

我要做的是让导航项的边框底部悬停效果与导航栏父容器的边框底部重叠！

【解决方案2】：

您正试图重叠需要更改定位 CSS 属性的蓝线。如果您只是想让它们无间隙地接触，您还可以考虑蓝线的填充和边距，从而在它们之间创建空间。

你必须沿着位置、内边距、边距和“！重要”：

.blueline{
  margin:0px;
  padding:0px;
}
.menu{
  padding-bottom:0px!important;
  margin-bottom:0px!important;
}

如果你需要让灰线重叠，你需要 CSS position:relative 和 absolute 让元素彼此重叠。

【讨论】：

蓝线是导航栏的底部边框（包含所有内容），我不想让导航栏变小，而只是制作灰线（边框底部悬停效果）降低，使其与导航栏的蓝色底部边框重叠。那么我应该添加重要的灰线吗？