CSS：內嵌顯示：使用DIV爲什麼我會在第二個DIV上獲得空間？

Question

很簡單的頁面。想要使用內聯顯示而不是浮動。現在設置幾次，但由於某種原因，在這個頁面上，當我設置標誌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

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

無法理解爲什麼會發生，但這裏是解決 changed display

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

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