html - 在同一栏上显示 Logo 和导航

Question

我的大脑完全放屁了，无法弄清楚如何在我的 html 代码中的同一行上显示我的标题/ Logo 和导航。我希望标题/ Logo 在左侧，导航在右侧。

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

对于.nav选择器移除宽度: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/