Question

我试图让蓝色边框上的橙色边框（只有橙色边框应该移动）。我在网站上看过很多次，但是如果不删除父div的填充，我就无法得到它。

nav.navbar.navbar-light {
  border-radius: 0;
  border-bottom: 1px solid #97B6D0;
  /*box-shadow: 0px 1px 2px #5286B1;*/
}
nav.navbar.navbar-light > ul.nav.navbar-nav > li.nav-item.active > a.nav-link {
  color: #5286B1;
  border-bottom: 2px solid #F7A411;
}

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />
<header class="container">
  <nav class="navbar navbar-light">
    <a class="navbar-brand" href="#">
      <img src="img/Xeeva_only_xeeva_sign_h_38 copy.png" width="43" height="38" alt="" />
    </a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Opportunities</a>
      </li>
    </ul>
  </nav>
</header>

这是关于JS小提琴的代码：

JSFiddle

Answer 1

尝试从整个列表中删除底部填充，将列表项向下按一个像素并增加橙色边框上方的底部填充。我将你的css改为：

/* Navigation*/

nav.navbar.navbar-light{
    border-radius: 0;
    border-bottom:1px solid #97B6D0;
    padding-bottom:0;                   /*ADDED LINE*/
    /*box-shadow: 0px 1px 2px #5286B1;*/
}
.navbar-nav .nav-item {
  margin-bottom:-1px;                   /*ADDED LINE*/
}
nav.navbar.navbar-light > ul.nav.navbar-nav > li.nav-item.active > a.nav-link {
    color: #5286B1;
    padding-bottom:15px;                /*ADDED LINE*/
    border-bottom:2px solid #F7A411;
}

这是更新的小提琴：http://jsfiddle.net/mpnLjr04/2/

通过CSS定位边框

1 个答案: