Html 在栅格内居中导航文本

我正试图将我的8个导航链接平均放置在导航栏上

这是我的导航HTML：

 <nav>
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>

我将这门课应用于8个li中的每一个，但似乎无法使它们都平均居中

如果有人能帮我，我会很高兴的

谢谢

---

Tim

此代码完全符合您的要求，我认为您没有应用框大小边框框或文本对齐中心

HTML:

---

这段代码正是您想要得到的，我认为您没有应用框大小、边框框或文本对齐中心

HTML:

你可以用这个

.nav{
显示器：flex；
证明内容：周围的空间；
/*证明内容：之间的空间*/
背景：黄色；
保证金：0；
填充：0；
列表样式：无；
}

您可以使用它

.nav{
显示器：flex；
证明内容：周围的空间；
/*证明内容：之间的空间*/
背景：黄色；
保证金：0；
填充：0；
列表样式：无；
}

这条路的宽度一直不一样elements@MarcosP埃雷兹古德我不认为这是OP的意图。他想很好地分配元素。然后，你需要再次阅读问题。这个问题从

开始，我试图在导航栏上平均放置我的8个导航链接。

。注意这个词equally@MarcosP埃雷兹古德，我想这不一定是他想要的。实际上，他只是想将物品居中，但他认为最好的方法是让所有物品的宽度相同。如果我错了，那么他会接受另一个答案，biggy。我想要元素按照这个答案隔开。谢谢这个宽度一点都不一样elements@MarcosP埃雷兹古德我不认为这是OP的意图。他想很好地分配元素。然后，你需要再次阅读问题。这个问题从

开始，我试图在导航栏上平均放置我的8个导航链接。

。注意这个词equally@MarcosP埃雷兹古德，我想这不一定是他想要的。实际上，他只是想将物品居中，但他认为最好的方法是让所有物品的宽度相同。如果我错了，那么他会接受另一个答案，biggy。我想要元素按照这个答案隔开。谢谢<代码>溢出：自动是清除浮动的一个讨厌的把戏，它肯定会来咬你。我建议使用

clear：两者都使用；显示：表格；内容：“

on

nav ul:after

overflow:auto

是清除浮标的一个讨厌的把戏，它肯定会来咬你。我建议使用

clear：两者都使用；显示：表格；内容：“开启<代码>导航ul:之后

。

.col-1-8 {
width:12.5% }

 <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>

*{
    box-sizing: border-box;
}

nav ul {
  background-color:yellow;
  overflow:auto;
  list-style:none;
  padding: 0;
  margin: 0;
  width: 800px; 
}

nav ul>li {
  float:left;
  width: 12.5%;
  text-align: center

}