如何将导航栏中的所有图标重新定位到中间

Question

* {
  padding : 0;
  margin  : 0;
  }
nav {
  padding          : 20px;
  background-color : #809906;
  list-style       : none;
  border-bottom    : 2px solid black;
  }
a {
  color         : black;
  padding-right : 115px;
  }
a:hover {
  color         : hotpink;
  }

<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>


<nav>
  <a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
  <a href="#"><i class="fa-solid fa-house"></i></a>
  <a href="#"><i class="fa-solid fa-user"></i></a>
  <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>

我尝试了各种方法，例如 flexbox 将图标放在导航栏中居中，但它不起作用。我试图将所有图标放置在导航栏的中心。我是这个领域的新手。

Answer 1

Flexbox 非常适合导航栏。

* {
  padding : 0;
  margin  : 0;
  }
nav {
  padding          : 20px;
  background-color : #809906;
  border-bottom    : 2px solid black;
  display          : flex;
  justify-content  : center;
  gap              : 1em;
  }
a {
  color         : black;
  }
a:hover {
  color         : hotpink;
  }

<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>


<nav>
  <a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
  <a href="#"><i class="fa-solid fa-house"></i></a>
  <a href="#"><i class="fa-solid fa-user"></i></a>
  <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>