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

Question

由于某种原因，我无法让我的徽标和导航菜单在我的标题中水平对齐。我仍在弄清楚浮动和显示属性，我猜这就是问题所在。我已经尝试将 display:inline-block 放在两者上，这似乎有效，直到我将 width:100% 放在我的 navContainer 上。那我该怎么做呢？

这是我的麻烦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/

这是它的 css

#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

尝试添加：

#logo {
    float: left;
}

别忘了清除你的花车！