php - 带有 float 文本和不对称边的自定义菜单

Question

我想为我的网站制作一个看起来像这张图片的菜单。

我基本上想要菜单的三个部分:居中的 Logo 、左侧的菜单项和右侧的菜单项。虚线框表示这些部分。

在左侧部分，我需要两行菜单项，它们的间距取决于框的大小(间距用红线表示)。右侧部分的间距也相同。

如果有人能指出正确的方向或提供 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;
}