爲什麼我的第一個內聯塊元素上面有空間

Question

我在容器內部有內聯塊元素，應該從容器的左上角開始顯示所有元素。出於某種原因，第一個元素顯示在它應該在的位置下面。我嘗試了保證金和填充重置，但是在檢查時無論如何都沒有保證金或填充。

下面是HTML（無空格所以他們不破壞佈局）：

<div class='nav'><div class='logo'><p>test</p></div><ul><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li></ul></div> 

這裏是CSS：

.nav { 
    position: relative; 
    width: 80%; 
    height: 50px; 
    background-color: red; 
    z-index: 1; 
} 
.nav .logo { 
    display: inline-block; 
    width: 10%; 
    height: 100%; 
    background-color: #f90; 

} 
.nav ul { 
    display: inline-block; 
    width: 90%; 
    text-align: center; 
} 
.nav li { 
    display: inline-block; 
    height: 100%; 
    line-height: 50px; 
    width: 20%; 
    background-color: grey; 
} 
.nav li a { 
    margin: 0; 
} 

這裏是一個codepen顯示問題：

http://codepen.io/Wryte/pen/Guavp

Answer 1

它們並不排隊，因爲它們的垂直對齊是baseline，如果將它們設置爲top，他們會排隊：

.nav .logo { 
    display: inline-block; 
    vertical-align: top; 
    width: 10%; 
    height: 100%; 
    background-color: #f90; 

} 
.nav ul { 
    display: inline-block; 
    vertical-align: top; 
    width: 90%; 
    text-align: center; 
} 

http://codepen.io/anon/pen/Kpthz