Question

我创建了一个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>

Answer 1

只需将此添加到您的＆＃34;导航栏＆＃34;：

width: 20%;

修改你可以通过另一种方式将其添加到＆＃34; nav ul＆＃34;：

table-layout:fixed;

最后一项的内容太长，你可以通过将其添加到＆＃34; nav ul li＆＃34;：
来隐藏
overflow-x: hidden

在此处查看：http://jsfiddle.net/vqrde5u4/

Answer 2

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

在你的CSS中：

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

Answer 3

添加：

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

现在，您还应该添加overflow:hidden;之类的内容，以便文字不会在边缘运行。

所有宽度相同的菜单项

3 个答案: