在標題中水平對齊徽標和導航菜單

Question

由於某種原因，我無法讓我的徽標和導航菜單在我的標題中水平對齊。我仍然在計算浮動和顯示屬性，我猜這就是問題所在。我試過把display：inline-block放在兩個上面，直到我在navContainer上放置寬度爲100％。那麼我該如何去做這件事？我的問題是jsfiddle。提前致謝。

編輯：我的意思是說我想讓我的標誌右側的navContainer。浮動：留在我的標誌作品上，但在標題上方放置了一個白色空間。

CSS

#header { 
    width: 100%; 
    height: 100px; 
    background-color: #DDDDDD; 
} 

#innerHeader { 
    margin: 0 auto; 
    width: 75%; 
    height: 100px; 
} 

#logo { 
    width: 100px; 
    height: 100px; 
} 

#navList { 
    margin-left: 50px; 
    width: 100%; 
    height: 100px; 
    background-color: red; 
} 

#navList li { 
display: inline; 
list-style-type: none; 
padding-right: 20px; 
} 

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="innerHeader"> 
      <div id="logo"> 
       <img src="http://i.imgur.com/ZZvupYE.png" title="Bad Gizmod" /> 
      </div> 
      <div id="navList"> 
       <ul> 
        <li><a href="#">Item two</a> 

        </li> 
        <li><a href="#">Item three</a> 

        </li> 
        <li><a href="#">Item four</a> 

        </li> 
        <li><a href="#">Item five</a> 

        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <!-- {block:Posts} {/block:Posts} --> 

Answer 1

編輯：

我猜OP希望它在他的標誌的右側。

http://jsfiddle.net/N9rk5/6/

以下是一個

#header { 
    width: 100%; 
    height: 100px; 
    background-color: #DDDDDD; 

} 

#innerHeader { 
    display: block; 
    margin: 0 auto; 
    width: 100%; 
    height: 100px; 
} 

#logo { 
    float: left; 
    width: 20%; 
    margin: 0 auto; 
    height: 100px; 
    display: inline-block; 
} 

#navList { 
    display: inline-block; 
    width: 70%; 
    margin-left: 0px; 
    float: right; 
    text-align: center; 
    height: 100px; 
    background-color: red; 
} 

#navList li { 

    display: inline; 
    float: left; 
    list-style-type: none; 
    padding: 0 5px; 
} 

Answer 2

嘗試添加CSS：

#logo { 
    float: left; 
} 

不要忘記，雖然清除浮動！