Элементы CSS inline-block li не выравниваются по горизонтали

Question

Строка css горизонтального меню, где я применяю элементы прокладки и встроенного блока к самой ссылке, поэтому можно щелкнуть весь блок, а не только текст ссылки. Обычно я плаваю свое меню гнезда UL, но событие, если я плаваю в этом списке, по-прежнему ставится вертикально, что, как я подозреваю, связано с встроенным блоком. Я бы предпочел не использовать float с тех пор, как несколько примеров, которые я видел, показывают, что это можно сделать, но мне не повезло с тем, чтобы встроенный блок или квартира работали с моим css.

Пример: http://jsfiddle.net/n4fkb66L/

HTML

<div id="navigation"> 
    <ul> 
     <li><a href="#"> Link 1 </a></li> 
     <li><a href="#"> Link 2 </a></li> 
     <li><a href="#"> Link 3 </a></li> 
    </ul> 
    </div> 

CSS

html { 
    position: relative; 
    min-height: 100%; 
    width: 100%; 
    background-color: #F9F5EA; 
    color: #333; 
    font-size: 16px; 
    font-family: 'Roboto', sans-serif; 
} 

body { 
    margin: 0 0 6.25em; 
} 

#navigation { 
    height: 6.25em; 
    background-color: #212121; 
    color: #fff; 
    text-align: center; 
    -webkit-box-shadow: 0 8px 6px -6px #333; 
    -moz-box-shadow: 0 8px 6px -6px #333; 
      box-shadow: 0 8px 6px -6px #333; 
} 

#navigation ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#naviation ul li { 
} 

#navigation ul li a { 
    display: inline-block; 
    vertical-align: top; 
    height: 6.25em; 
    width: 10em; 
    line-height: 6.25em; 
    text-decoration: none; 
    color: #fff; 
    transition: .3s background-color; 
} 

#navigation ul li a:hover { 
    background-color: #DE5842; 
} 

#navigation ul li a:active { 
    background-color: #6CBDF2; 
    cursor: default; 
} 

Answer 1

решаемые путем добавления display:inline-block на <li>?

#navigation li{ 
    display: inline-block; 
} 

здесь fiddle.

Объяснение: Даже е ваши элементы с display:inline-block, то <li> все еще занимает всю строку, таким образом, не оставляя места для следующего <li> элемента и заставить его перейти к следующей строке.