Question

我正在制作导航标题，其中徽标位于左侧，导航位于右侧，位于相同高度。问题在于，出于某种原因，右侧总是被推倒：

 <div class="top_wrapper">
    <div class="top">
        <div class="logo">
            <img src="logo.jpg">
        </div>

        <div class="menu">
            right side content goes here
        </div>

    </div>
</div>

CSS：

 .top_wrapper {
background: none repeat scroll 0 0 #FFFFFF;
height: 60px;
position: fixed;
width: 100%;
z-index: 2000;
 }

 .top {
margin: auto;
width: 970px;
 }

 .logo {
margin-top: 15px;
width:250px;
 }

 .menu {
float: right;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
margin-top: 20px;
text-transform: uppercase;
 }

我做错了什么？

Answer 1

你的HTML很好，不需要改变任何东西。

我建议使用以下 CSS ：

.top_wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 60px;
    position: fixed;
    width: 100%;
}
.top {
    margin: auto;
    width: 970px;
    border: 1px dotted gray; /* for demo only */
    overflow: auto; /* to contain the floats within the parent block */
}
.logo {
    margin-top: 15px;
    width: 250px;
    float: left; /* float the logo to the left also */
}
.menu {
    float: right;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 20px;
    text-transform: uppercase;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/Rf3yP/

关键是将.logo元素浮动到左侧，这会将其从内容流中取出。

根据CSS规范，浮动元素在它们之前的任何流入元素之后尽可能地放置在内容的顶部。

在您的情况下，.logo位于.menu之前，菜单位于徽标下方。

当您浮动.logo时，它会被放置在流入内容（在这种情况下为父容器.top的顶部）之后的左侧和顶部，并且由于同一行上有空间，{ {1}}块也放在同一行。

将.menu添加到overflow: auto，以便任何背景颜色/图像或边框包裹浮动元素（这会启动新的块格式化上下文）。

Answer 2

尝试替换float：right;浮动：左;在.menu上并添加float：left;到.logo

Heres a jsFiddle http://jsfiddle.net/eD5Br/

  .menu {
float: left;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
margin-top: 20px;
text-transform: uppercase;
 }

 .logo {
margin-top: 15px;
width:250px;
float:left;
 }

为什么我的div不是水平对齐的？

2 个答案: