Html 等宽和全宽导航

我正在为我的HCI课程开发一个web应用程序，但导航有问题。我试图让我的导航是整个屏幕的宽度，每个文本块是相等的。我一共有十项。我还想在文本上方添加一个图标，但这仍在进行中。我的当前代码将文本向左对齐，并且没有拉伸导航的整个宽度。任何帮助都会很好

HTML:

---

可能是复制粘贴错误，但这不是正确的HTML：

<div id = "location"><a href=””>Location</a></div>

---

删除链接周围的

可能是复制粘贴错误，但这不是正确的HTML：

<div id = "location"><a href=””>Location</a></div>

---

删除链接周围的

这是否更接近您想要的内容

您不需要div元素和锚点。使用显示块时，锚具有与div相似的特性

像这样：

---

编辑：我没有费心在小提琴中重新格式化你的代码，所以你可能想看一眼，在使用之前自己修复它。它很管用，只是不太好看。：）

这是不是有点接近你想要的

您不需要div元素和锚点。使用显示块时，锚具有与div相似的特性

像这样：

---

编辑：我没有费心在小提琴中重新格式化你的代码，所以你可能想看一眼，在使用之前自己修复它。它很管用，只是不太好看。：）

HTML上的div还没有应用到CSS中。HTML上的div也没有应用到CSS中。确切地说，是什么属性导致了这种情况？你知道吗？同样感谢@Askanison4。问题是你在div中嵌套了锚，所以div使用了它自己的属性以及你的a标记。这是一种更简洁、更恰当的方法：）确切地说，是什么属性导致了这种情况？你知道吗？谢谢@askanison4问题是你将锚嵌套在div中，因此div将使用它自己的属性以及你的a标记。这是更整洁、更恰当的做事方式：）

<div id = "location"><a href=””>Location</a></div>

nav {
  text-align: center;
}
nav a { 
   display:inline-block;
   margin: 0 auto;
   width: auto;
   color:#111;
   padding:10px;
   -webkit-box-flex:1;
   -moz-box-flex:1;
   box-flex:1;
   text-align:center;
   text-decoration:none;
   -webkit-transition:all .4s linear;
   -moz-transition:all .4s linear;
   -o-transition:all .4s linear;
   transition:all .4s linear;
}