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

Question

很简单的页面。想要使用 inline-display 而不是 float。现在设置了几次，但是，由于某种原因，在此页面上，当我设置徽标 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;
}

这是一个演示

Answer 2

您应该垂直对齐图像（徽标）。默认情况下，它与默认文本行对齐。

所以，更新你的 CSS 规则

#topbar #logo {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    width: 30%;
    height: 91px;
    vertical-align: middle;
}

这是更新的小提琴http://jsfiddle.net/tZNw4/29/

Answer 3

无法理解为什么会发生这种情况，但这里是解决方案 更改显示

#topbar {
width: 100%;
max-width: 1000px;
margin: auto;
display: table;
}

#topbar .item {
line-height: 91px;
display: table-cell;
background-color: #063;
height: 91px;
}