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

对于.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/

Answer 2

删除填充将起作用 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 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;}