css - ナビゲーションをロゴに合わせるにはどうすればよいですか？

Question

次のコードがあります。現在、divのロゴだけですが、後でスタイルを設定するナビゲーションセルをいくつか追加しようとしています。問題は、ロゴと「一致」しているように見えないことです。つまり、常に次の行にドロップダウンします。私は何が間違っているのですか？

    #header {
    position:relative;
    padding-top:0px;
    width:960px;
    margin-left: auto ;
    margin-right: auto ;
    }
    #nav {
    padding:0px;
    height:20px;
    }
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    #nav li {
    display:inline;
    margin:0;
    padding:0;
    }

    <div id="header">
    <img src="logo3.png" height="91" width="162">
            <div id="nav">
            <ul>
            <li>nav item 1</li>
            <li>nav item 2</li>
            <li>nav item 3</li>
            </ul>
    </div>
    </div>

Answer 1

ここでは、http：//jsfiddle.net/PLmSB/1/

Chromiumでテスト済み

追加する必要がありました

#nav {
    display: inline-block;
    vertical-align:top; /*optional*/
}

インラインブロックのクロスブラウザサポートに関するこの記事を必ずお読みください

そうでなければ、@ Anaが指摘したように、

img {
    float: left;
}

これは機能するはずです。http://jsfiddle.net/PLmSB/3/

Answer 2

ロゴをフロートさせる必要があります。http://dabblet.com/gist/3118980