Dlaczego mój pierwszy element bloku śródliniowego ma przestrzeń nad nim?

Question

Mam wewnątrz wbudowane elementy bloku, które powinny być wyświetlane od lewej górnej strony kontenera. Z jakiegoś powodu pierwszy element jest wyświetlany poniżej, gdzie powinien być. Próbowałem zresetować marginesy i wypełnienia, ale podczas kontroli nie ma ani marginesu ani padding.

oto html (bez spacji, żeby nie zniszczyć układ):

<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> 

oto 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; 
} 

o to codepen pokazujący problem:

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

Answer 1

Nie są ułożone w linii, ponieważ ich pionowe wyrównania są baseline, jeśli ich wartość top oni kolejce:

.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