Html 对齐导航栏上的链接

导航栏上有三个链接：Previous、Home和Next。如果

.navbar

a

float:left

完成，则所有三个对齐到左侧。如果

.navbar

a

float:right

完成，则所有三个对齐到右侧。问题是要对齐左上一个，居中和右下一个。如何使用css实现这一点

.navbar{
溢出：隐藏；
背景色：#333；
位置：固定；
排名：0；
宽度：100%；
}
纳瓦尔先生{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：1%；
文字装饰：无；
字号：17px；
}

---

为父元素设置

文本对齐：居中，然后仅浮动第一个和最后一个元素。即使中心有更多的锚，而不是家，这种方法仍然有效


.navbar{
溢出：隐藏；
背景色：#333；
位置：固定；
排名：0；
宽度：100%；
文本对齐：居中
}
纳瓦尔先生{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
填充：1%；
文字装饰：无；
字号：17px；
}
.navbar a:类型{float:left；}的第一个
.navbar a:类型{float:right；}的最后一个


工作链接：
使用Flexbox非常简单


正文{
保证金：0；
}
navbar先生{
显示器：flex；
背景色：#333；
位置：固定；
排名：0；
宽度：100%；
}
纳瓦尔先生{
弹性：1；
颜色：白色；
}
.home{文本对齐：居中}
.next{text align:right}

将每个链接的宽度设置为33%。如果不希望间距相等，则必须使用float。我通常避免浮动：）如果有动态内容，则使用边距不合适，因为只有当左右边距相等时，中间边距才居中。@VXp I对不同大小的内容没有问题。你什么意思？上一篇，以你的例子来说，如果你将“上一篇”文本（或“下一篇”）改为更长的文本，你会发现中间的文本不再居中，因为它受其他两篇的内容长度的影响，如果准确的话，它以前甚至没有居中。当然不是现在，因为我已经改变了在我编辑你的答案之前，我谈论的是
margin-*：auto
方式，只是解释我为什么这么做。哦，我现在明白了。）谢谢@VXp:）
.navbar a {
  width:31%;
  display: inline-block;
}