分割导航 - CSS | MDN

依赖项

一种常见的导航模式是让一个元素与其他元素分开。我们可以使用 flexbox 实现此目的，而无需将两组项目制作成两个独立的 flex 容器。

示例

点击下面代码块中的“Play”按钮，在 MDN Playground 中编辑示例。

html

<nav>
  <ul class="main-nav">
    <li><a href="">About</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Our Team</a></li>
    <li class="push"><a href="">Contact</a></li>
  </ul>
</nav>

css

.main-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 1.2em sans-serif;

  display: flex;
}

.main-nav a {
  padding: 0.5em 1em;
  display: block;
}

.push {
  margin-left: auto;
}