具有相同宽度的所有菜单项答案

【问题标题】：All menu items with the same width具有相同宽度的所有菜单项
【发布时间】：2014-09-24 17:49:25
【问题描述】：

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

我的 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 class="active"><a href="#">Asdfsdfsd</a></li>
    <li><a href="#">Pefsdfsfsdfsdf dgdgdfgo</a></li>
    <li><a href="#">Hsdfsdfe</a> </li>
    <li><a href="#">Csfsdfsdfsfs</a></li>
     <li><a href="#">Visdfsdfcdsfdsfyy</a> </li>
   </ul>

</nav>

【问题讨论】：

stackoverflow.com/questions/6885785/…

标签： html css menu

【解决方案1】：

只需将其添加到您的“nav ul li”中即可：

width: 20%;

编辑： 您也可以通过将其添加到“nav ul”来采用另一种方式：

table-layout:fixed;

最后一项内容太长，可以在“nav ul li”中添加隐藏：

overflow-x: hidden

在这里查看：http://jsfiddle.net/vqrde5u4/

【讨论】：

【解决方案2】：

你必须设置 li 标签的宽度。

在您的 CSS 中：

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

【讨论】：

【解决方案3】：

添加这个：

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

现在，您还应该添加 overflow:hidden; 之类的内容，这样文本就不会超出边缘。

【讨论】：