html - 如何将较小的 div 的边框底部放在另一个较大的 div 的边框底部之上？

Question

我只是在一个较大的 div（标题）中有 1 个较小的 div（导航菜单）。

我需要较小 div 的边框底部与较大 div 的边框底部高度相同。

我附上了图片：

有

想

.main-navigation-link .main-navigation-link-text {
  border-bottom: 6px solid #F18000;
  color: #F18000;
  padding-bottom: 7px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-main {
    border-bottom: 7px solid red;
}

<div class="nav-main fixed-header">              
  <div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
    <div class="container">
    <nav class="nav main-navigation-menu">

        <a class="nav-link main-navigation-link">
            <div class="main-navigation-link-text">
                <span itemprop="name">Dönermesser</span>
            </div>
        </a>

    </nav>
    </div>
   </div>
</div>

JSFiddle

标签： htmlcssborder

Answer 1

尝试在较小的 div 上设置边距margin-bottom: -5px;（或较大 div 的边框厚度值）

  .main-navigation-link .main-navigation-link-text {
    border-bottom: 6px solid #F18000;
    color: #F18000;
    padding-bottom: 6px;
    margin-bottom: -6px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
.nav-main {
    border-bottom: 6px solid red;
}

<div class="nav-main fixed-header"> 
  <div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
    <div class="container">
      <nav class="nav main-navigation-menu">
        <a class="nav-link main-navigation-link">
            <div class="main-navigation-link-text">
                <span itemprop="name">Dönermesser</span>
            </div>
        </a>
      </nav>
    </div>
  </div>
</div>