如何实现这个菜单布局？全高边框和下拉菜单与菜单边框底部正确对齐？

Posted 2023-02-17

【中文标题】如何实现这个菜单布局？全高边框和下拉菜单与菜单边框底部正确对齐？

【英文标题】：How to achieve this menu layout? With full-height borders and the dropdown-menu properly aligned with the menu border bottom?

【发布时间】：2018-01-07 19:54:39

【问题描述】：

我想要一个如下所示的菜单，其中：

菜单的border-bottom紧挨着橙色背景，没有任何空白，并且这个border-bottom占据了全角，左右两边都没有空白

徽标右侧有一个全高边框，并且每个菜单项也有 全高边框

此外，我希望具有下拉菜单的“项目”在打开时与导航栏的灰色边框底部对齐。

对于我使用下面的代码，但我没有实现这个布局，我有一个工作示例，布局我得到“http://jsfiddle.net/4606qqux/”。你知道如何修复代码来实现上述布局吗？

HTML：

<div class="container-fluid px-0">
  <nav class="navbar navbar-expand-md navbar-light">
    <a href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="menu_container">
      <div class="collapse navbar-collapse" id="main_nav">
        <ul class="navbar-nav ml-auto d-flex align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Item 0</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Item 1</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-user" aria-hidden="true"></i> Jan
            </a>
            <div class="dropdown-menu" aria-labelledby="userDropdown">
              <a class="dropdown-item" href="#">Edit Profile</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">logout</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

CSS

.menu_container 
  position: relative;
  width: 100%;
  border-bottom:1px solid gray;


div.dropdown-menu 
  left: auto;
  right: 0;


section 
  background-color: orange;
  height: 300px;
  width: 100%;


.nav-item 
  border-left: 1px solid gray;


.navbar
  border-right: 1px solid gray;

.logo
  border-right:1px solid gray;

【问题讨论】：

你的边框宽度是多少？

我使用 1px 的边框。

【参考方案1】：

据我了解，这就是你所追求的：

.logo 
  border-right:1px solid gray;
  height: 40px;
  border-bottom: 1px solid gray;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;

.dropdown-menu 
  border-radius: 0;
  border: 1px solid gray;
  margin-top: 0;

这是更新后的小提琴： http://jsfiddle.net/4606qqux/1/

这是一个更加更新的小提琴，顶部导航元素周围没有填充： http://jsfiddle.net/4606qqux/2/

【讨论】：

谢谢。但它不相等，例如在图像中，菜单的灰色边框底部紧挨着/粘在橙色背景上，没有任何空白。并且图像中的这个边框底部占据了整个宽度，左右没有空白。此外，标志和菜单项的边框没有像图片那样全高，菜单项上方有一些空白。

从第一个开始的线程怎么能理解你刚才说的？请更新初始线程，我会帮助您。