Question

我想为我的网站制作一个类似于此图像的菜单。

我基本上要菜单的三个部分：居中徽标，菜单项的左侧和菜单项的右侧。虚线框表示这些部分。

在左侧，我需要两行菜单项，行的间距取决于盒子的大小（用红线表示间距）。右侧的间距也相同。

如果有人可以指出正确的方向或提供html / css，将不胜感激！

Answer 1

仅使用flexbox的更好解决方案：

https://codepen.io/seanstopnik/pen/b5a8294dae7969c4c9fa7cfca470626c

HTML：

<header class="global-header" role="banner">
  <nav class="global-nav" role="navigation">
    <ul class="list global-nav__list">
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 1</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 2</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 3</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 4</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 5</a></li>
    </ul>
    <a class="global-nav__logo" href="/"></a>
    <ul class="list global-nav__list">
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">About</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Contact</a></li>
    </ul>
  </nav>
</header>

CSS：

.global-header {
  background-color: #fff;
  padding: 10px;
}

.global-nav {
  display: flex;
  justify-content: space-around;
}

.global-nav__list {
  display: flex;
  width: 100%;
  height: 70px;
  flex-wrap: wrap;
  align-items: center;
}
.global-nav__list .global-nav__list-item {
  position: relative;
  flex: 1;
  text-align: center;
}
.global-nav__list .global-nav__list-item:nth-child(1), .global-nav__list .global-nav__list-item:nth-child(2) {
  flex: 0 0 50%;
}
.global-nav__list .global-nav__list-item:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: red;
  content: '';
}

.global-nav__link {
  position: relative;
  display: inline-block;
  color: #3cc7e3;
  background-color: #fff;
  padding: 0 6px;
  z-index: 1;
}
.global-nav__link:hover {
  color: #222;
}

.global-nav__logo {
  flex: 0 0 200px;
  border-radius: 50%;
  background-color: blue;
  margin: 0 10px;
}

Answer 2

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
  
    <div class="col-sm-5">
    
      <div class="row">
      
        <div class="col">
        Left Content 
        </div>
        
        <div class="w-100"></div>
        
         <div class="col">
        Left Content under
        </div>
        
      </div>
      
    </div>


    <div class="col-sm-2">
      Image?
    </div>
    
    <div class="col-sm-5">
      <span class="float-right">Right Content</span>
    </div>
    
  </div>
</div>

在这里，我假设您因为使用了标签而使用了引导程序，如果没有，那么对不起。这可行，您应该看看at the Bootstrap Docs以获得更多示例。

编辑：如果您希望这些列中的部分也很容易实现，只需看一下文档

具有浮动文本和不对称边的自定义菜单

2 个答案: