html - CSS导航栏重叠和填充问题

Question

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

不知道如何让悬停底部边框效果能够与父底部边框重叠。这是目前的样子

标签： htmlcssbootstrap-4frontendpadding

Answer 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>