html - 对齐导航栏上的链接

Question

导航栏上有三个链接:Previous、Home 和 Next。如果 .navbar a float: left 完成，所有三个都向左对齐。如果 .navbar a float: right 完成后，所有三个都右对齐。问题是对齐Previous on left，Home on Center 和Next on Right。这如何用 css 完成？

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  font-size: 17px;
}

<div class="navbar">
  <a href="#" class="back">Previous</a>
  <a href="#" class="home">Home</a>
  <a href="#" class="next">Next</a>
</div>

Answer 1

使用 Flexbox 非常简单

body {
  margin: 0;
}

.navbar {
  display: flex;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  flex: 1;
  color: white;
}

.home {text-align: center}
.next {text-align: right}

<div class="navbar">
  <a href="#" class="back">Previous</a>
  <a href="#" class="home">Home</a>
  <a href="#" class="next">Next Next Next Next Next Next Next Next Next Next Next</a>
</div>