text CSS Flexbox导航栏

Posted 2021-05-03

<header>
  <nav>
    <ul class="nav-list">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Products</a></li>
      <li class="nav-item"><a href="#">Demos</a></li>
      <li class="nav-item"><a href="#">Help</a></li>
    </ul>
  </nav>
</header>

.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item a {
  color: #ddd;
  margin: 0 10px;
  text-decoration: none;
}

.nav-item a:hover {
  color: #fff;
}