为什么我的第一个内联块元素上面有空间

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