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 to float：right和（如果需要）更改填充：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

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

在同一个栏上显示徽标和导航

3 个答案: