爲什麼這些項目不能在線顯示？

Question

發生了一些奇怪的事情...我使用display: inline-block來顯示內聯元素。一切都好，直到添加一些新的元素。下面是一個例子：

CSS：

section#main{ 
    width: 960px; 
    margin: 7% auto 0; 
    background: #000; 
    opacity: 0.86; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
} 

div#video{ 
    border: 1px solid red; 
    width: 640px; 
    height: 360px; 
    margin: 10px; 
    display: inline-block; 
} 

nav{ 
    margin: 10px; 
    border: 1px solid yellow; 
    display: inline-block; 
    height: 360px; 
    width: 270px; 
} 

HTML：

<section id="main"> 
     <div id="video"></div> 
     <nav> 
      <ul> 
      <li>Keliaujame ?... JAV: ?ikaga/Chicago S01E03</li>   
      </ul> 
     </nav> 
     <div id="comments"></div> 
    </section> 

http://jsfiddle.net/nonamez/PfeP5/2/

出了什麼問題？

Answer 1

這是一個垂直對齊問題，只需設置兩個元素垂直對齊頂部

div#video{ 
    vertical-align:top; 
} 

nav{ 
    vertical-align:top; 
} 

http://jsfiddle.net/xHNJm/

Answer 2

來自

刪除display: inline-block;添加float: left;既

下面添加一個<div style="clear: both"></div><div id="comments">

爲證明這一小提琴：http://jsfiddle.net/9BsS3/

Answer 3

就個人而言，我總是儘量避免使用僅僅是因爲舉步維艱的行爲跨瀏覽器的inline-block的。

我會使用下面的CSS（除去顯示：內聯塊;以及使用float：留在它的位置（確保父元素也被浮動，以確保兒童的清除浮動元素）：

section#main{ 
    width: 960px; 
    margin: 7% auto 0; 
    float:left; 
    background: #000; 
    opacity: 0.86; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
} 

div#video{ 
    border: 1px solid red; 
    width: 640px; 
    height: 360px; 
    margin: 10px; 
    float:left; 
} 

nav{ 
    margin: 10px; 
    border: 1px solid yellow; 
    float:left; 
    height: 360px; 
    width: 270px; 
} 
nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
nav li { 
    color:#fff; 
}