CSS:内联显示:使用 DIV 为什么我在第二个 DIV 上获得空间？

Question

非常简单的页面。想要使用内联显示而不是 float 。现在设置了几次，但是，出于某种原因，当我设置 Logo div 的高度时，它会在该页面上下拉菜单 div。

演示在 jsfiddle

HTML

<div id="topbar">
<div class="item" id="logo"></div>
<div class="item" id="menu">Menu</div>
</div>

CSS

    #topbar {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
#topbar .item {
    line-height: 91px;
    display: inline-block;
    background-color: #063;
}
#topbar #logo {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    width: 30%;
    height: 91px;
}
#topbar #menu {
    width: 60%;
}

我这边可能是简单的解决方案或简单的错误，但看不到。

Answer 1

在菜单上使用vertical-align:top，它应该看起来不错。使 #menu 的样式如下:

#topbar #menu {
    width: 60%;
    vertical-align: top;
}

这是一个 demo