Все элементы меню с одинаковой шириной

Question

Я создал отзывчивое меню со 100% шириной. Возможно ли иметь одну и ту же длину для каждого элемента меню. На данный момент пункты меню с большим количеством слов имеют большую ширину, чем те, у которых меньше слов. Надеюсь, это имеет смысл. Heres мой 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

Просто добавьте в ваш "нав уль ли":

width: 20%; 

Edit: You может пойти другим путем, добавив это в «nav ul»:

table-layout:fixed; 

Содержание последнего элемента слишком долго, вы можете скрыть, добавив в «нав уль Ли»:

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; так что текст не будет работать от края.