Html 宽度相同的所有菜单项

我创建了一个100%宽度的响应菜单。每个菜单项是否可以有相同的长度。目前，单词较多的菜单项比单词较少的菜单项具有更大的宽度。我希望这有点道理。这是我的

我的CSS：

nav {
margin: 0 auto; 
text-align: center;
background: #fff;
height:70px;
  width:100%;
}

nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: table;
vertical-align: top;
background: rgba(148,148,149,1);
}

nav ul li {
display: table-cell;
margin: 0;
padding: 0;

}

nav ul li a {
display: block; 
padding: 10px 7px;
color: #000;
text-decoration:none;

}
nav ul li~li { border-left: 1px solid #857D7A; }

nav .active a {
background: rgba(180,85,12,1);
color:#fff;
}

HTML:

只需将此添加到您的“nav ul li”：

编辑： 您可以通过将其添加到“nav ul”中来实现另一种方式：

最后一项的内容太长，您可以通过将其添加到“nav ul li”来隐藏：

---

检查此处：

您必须设置li标记的宽度

在CSS中：

nav li { width: 20%; /*100% width / 5 elements*/ }

添加以下内容：

nav ul{
    //other stuff
    table-layout:fixed;
}

现在，您还应该添加类似于

overflow:hidden这样文本就不会从边缘溢出

table-layout:fixed;

overflow-x: hidden

nav li { width: 20%; /*100% width / 5 elements*/ }

nav ul{
    //other stuff
    table-layout:fixed;
}