элементы списка навигационных элементов, изменяющиеся в зависимости от длины строки списка

Question

Я создал навигационную панель, которая, предположительно, имеет элементы списка, равномерно распределенные вдоль навигационной панели, хотя кажется, что элементы списка с более длинными строками имеют большую ширину, чем другие. Есть ли способ исправить это?

<div id="menu-bar"> 
    <ul> 
     <li><a href=#>Home</a></li> 
     <li><a href="ferrari.html">Ferrari</a></li> 
     <li><a href="lamborghini.html">Lamborghini</a></li> 
     <li><a href="bugatti.html">Bugatti</a></li> 
    </ul> 
</div> 

CSS:

* { 
    margin: 0px; 
    padding: 0px; 
} 

#menu-bar { 
background-color: #51F069; 
width: 100%; 
height: 40px; 
border-top: 2px solid #8f8f8f; 
border-bottom: 2px solid #8f8f8f; 
display: table; 
} 

#menu-bar li { 
list-style-type: none; 
display: inline-block; 
font-family: Ferrari; 
display: table-cell; 
text-align: center; 
} 

#menu-bar a { 
display: block; 
font-size: 25px; 
line-height: 40px; 
} 

#menu-bar ul { 
width: 100%; 
display: table; 
} 

Answer 1

Это поведение по умолчанию, они установлены в display:table-cell. Если вы посмотрите на таблицу HTML, ячейки с более длинным содержимым занимают больше места в таблице.

Просто установите width ваши элементы списка:

#menu-bar li { 
    list-style-type: none;  
    font-family: Ferrari; 
    display: table-cell; 
    text-align: center; 
    width: 25%; /* 100%/4 li's */ 

}

Вот скрипка: http://jsfiddle.net/sa7x258k/1/