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

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：http://jsfiddle.net/audetwebdesign/Rf3yP/

的关键是要.logo元素浮动到左侧，这需要它的内容流：

在

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

观看演示。

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

在你的情况下，.logo先于.menu，把菜单放在了logo下面。

当浮动.logo，它被放置在左侧和顶部以下的（在这种情况下父容器.top的顶部）的流入内容并且由于有空间上的同一行中，.menu块也被放置在相同线。

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

Answer 2

试着替换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; 
}