佈局：HTML + CSS

Question

我有這樣的代碼：

<div class="container" id="container"> 
    <div class="content" id="content"> 
     <div class='nav'> 
      <ul> 
       <li><a href='#'>One</a></li> 
       <li><a href='#'>Two</a></li> 
       <li><a href='#'>Three</a></li> 
       <li><a href='#'>Four</a></li> 
       <li><a href='#'>Five</a></li> 
      </ul> 
     </div> 
     <div class='innercontent'> 
      test 
     </div> 
    </div> 
</div> 

用下面的CSS：

.content { 
    background-color: blue; 
    height: 190px; 
    padding: 30px; 
} 
.nav { 
    background-color: blue; 
    display: inline-block; 
    height: 140px; 
    width: 200px; 
    margin: 10px; 
} 
.nav a { 
    display: block; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
} 
.nav li { 
    list-style: none; 
    padding: 0px; 
    background-color: #369; 
    padding: 4px 5px; 
    margin: 8px; 0px; 
    border-radius: 15px; 
    text-align: center; 
} 
.nav ul { 
    background-color: yellow; 
    padding: 0px; 
    margin: 0px; 
} 
.innercontent { 
    top: 0px; 
    background-color: red; 
    display: inline-block; 
    height: 20px; 
    width: 150px; 
    margin: 10px; 
} 

問題：第二個div（innercontent）的頂部應恰好與第一排隊ul的頂部。我做錯了什麼？

Answer 1

兩件事情，你就大功告成了：

add float:left; to .nav 
change margin:20px; in .innercontent 

所以到底應該看起來像

.nav { 
    background-color: blue; 
    display: inline-block; 
    height: 140px; 
    width: 200px; 
    margin: 10px; 
    float:left; 
} 

.innercontent { 
    top: 0px; 
    background-color: red; 
    display: inline-block; 
    height: 20px; 
    width: 150px; 
    margin: 10px; 
} 

浮動是必要的，這樣可以.innercontent四處漂浮.nav

Answer 2

嘗試設置vertical-align:top;作爲內容。默認情況下，vertical-align設置爲baseline。

Answer 3

添加float:left對於.nav和.innercontent

我看到你使用top屬性.innercontent但要記住，這個性能僅與定位的元素使用（relative，absolute，fixed）

我建議你閱讀以下兩篇文章，以瞭解如何position和float工作原理：

CSS Floats 101 & CSS Positioning 101。

演示：http://jsfiddle.net/GYPJH/