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

I have inline-block elements inside of a container that should all be displayed starting at the top left of the container. For some reason the first element is displayed below where it should be. I've tried margin and padding resets but when inspected there is no margin or padding anyways.

我在容器内部有内联块元素，应该从容器的左上角开始显示。由于某种原因，第一个元素显示在它应该的下面。我已尝试过边距和填充重置，但在检查时无论如何都没有边距或填充。

here is the html (no spaces so they don't ruin the layout):

这里是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>

here is the css:

这是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;
}

here is a codepen showing the problem:

这是一个显示问题的codepen：

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

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

1 个解决方案

#1

They aren't lined up because their vertical alignments are baseline, if you set them to top they would line up:

它们没有排列，因为它们的垂直对齐是基线，如果你将它们设置为顶部，它们会排成一行：

.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

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