对齐导航栏上的链接

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

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

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

.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 3

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

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