html - 居中主导航并右对齐购物车

Question

我试图以最干净的方式获得以下标题。如果它是通过 CSS Grid 或 Flexbox，我并不在意，只要解决方案不是 hacky。

我曾尝试使用 Flexbox 执行此操作，但我被卡住了，这是我的代码：

HTML

<nav>
  <div class="container nav__body">
    <ul class="nav__links">
      <li><a href="#" class="nav__link">Products</a></li>
      <li><a href="#" class="nav__link">Our Story</a></li>
      <li><a href="index.html" class="nav__link nav__logo">Home</a></li>
      <li><a href="#" class="nav__link">Blog</a></li>
      <li><a href="#" class="nav__link">Contact</a></li>
    </ul>
    <a href="#" class="nav__cart">Cart</a>
  </div>
</nav>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
}

ul {
  list-style: none;
}

nav {
  background-color: #ACD038;
  height: 100px;
}

.container {
  width: 1024px;
  margin: 0 auto;
  background-color: grey;
  height: 100%;
}

.nav__body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav__links {
  display: flex;
  background-color: firebrick;
}

.nav__link {
  padding: 5px 20px 5px 0;
  color: #fff;
}

我还创建了一个 Codepen。

标签： htmlcsscss-grid