html - ロゴとナビを同じバーに表示

Question

頭がおかしくなり、html コードの同じ行にタイトル/ロゴとナビゲーションを表示する方法がわかりません。タイトル/ロゴを左側に配置し、ナビゲーションを右側に配置したい。

ここに私のHTMLがあります：

<div class="header">
    <div class="title">
        <h1>Homegrown</h1>
    </div><!--/.title-->
    <nav class="nav">
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav><!--/.nav-->
</div><!--/.header-->

これが私のCSSです：

.title {display:inline; float:left; margin:0 auto;}
.nav {
    display:inline;
    float:left;
    width:100%;
    margin:0 1.7%;
    padding:25px 2%;
    margin-bottom:0;
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}

Answer 1

パディングを削除すると動作します Demo http://jsfiddle.net/vFgke/

.title {display:inline; float:left; margin:0 auto;}
.nav {
    display:inline;
    float:right;

    margin:0 1.7%;

    margin-bottom:0;
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}

Answer 2

.navセレクターの場合、width: 100% を削除します。、 float: left を float: right に変更し、(必要に応じて) padding:25px 2% を変更します。パディングに:0 2%;

.nav {
    display: inline;
    float: right;
    /*width:100%;*/
    margin: 0 1.7%;
    /*padding:25px 2%;*/
    padding: 0 2%;
    margin-bottom: 0;
}

デモ: http://jsfiddle.net/4svrN/

Answer 3

試す

body {
width: 100%;
}
.title {
display:inline; 
float:left; 
margin:0 auto;
}
.nav {
display: inline;
float: right;
padding: 25px 2%;
}
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}