对齐导航栏上的链接

Question

导航栏上有三个链接：上一个，主页和下一个。如果.navbar float: left已完成，则所有三个都会向左对齐。如果.navbar float: 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

为父级设置text-align:center，然后仅浮动第一个和最后元素。即使有更多的锚点而不是中心的 Home ，这也有效。

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

    .navbar a {
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      padding: 1%;
      text-decoration: none;
      font-size: 17px;
 
    }
    
    .navbar a:first-of-type{float:left;}
    .navbar a:last-of-type{float:right;}

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

请注意，锚点应为inline-block而不是块。

Answer 2

使用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>

Answer 3

.navbar a {
  width:31%;
  display: inline-block;
}

工作链接：https://codepen.io/sidhanshu28/pen/yEobga