在标题中水平对齐徽标和导航菜单

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; 
} 

不要忘记，虽然清除浮动！