为什么我的第一个 inline-block 元素上方有空间答案

【问题标题】：Why does my first inline-block element have space above it为什么我的第一个 inline-block 元素上方有空间
【发布时间】：2013-03-22 01:07:18
【问题描述】：

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

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

这是一个显示问题的代码笔：

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

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

非常感谢。最后是垂直对齐属性的使用