0

我正在开发一个导航标题，其中徽标位于左侧，右侧导航位于其旁边，高度相同。问题在于，出于某种原因，右侧总是被向下推：

 <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;
 }

我究竟做错了什么？

4

2 回答 2

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在这种情况下是父容器的顶部），并且由于同一行上有空间，因此该.menu块也放置在同一行上。

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

于 2013-08-22T16:29:57.230 回答
0

尝试替换 float:right; 带浮动：左；在 .menu 上并添加 float:left; 转为 .logo

这是一个 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;
 }
于 2013-08-22T16:29:45.507 回答