如何使用CSS并排放置两个块

Question

我有一个徽标和一个二级菜单,我希望出现在同一行(最左侧的徽标和最右侧的菜单).徽标宽度未定义,辅助菜单宽度为200px宽.当我应用以下CSS时,二级菜单被推到徽标下方的行(但仍然在页面的右侧):

#logo {
padding-bottom: 40px;
}

.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}

以下是HTML的相关部分:

<div id="logo"> 
  <a href="index.html"> <img id="logoimg" border="0" alt="" src="images/logo.gif"/> </a>        
</div> 
<div class="secondaryMenu">
  <a href="about.html">About</a> | <a href="services.html">Services</a> |
  <a href="contactus.html">Contact Us</a> 
</div>

我很欣赏任何关于我做错事的想法.

Answer 1

#logo 需要 float: left

那么你应该clear: both在之后添加一个样式化的容器,.secondardMenu或者使用clearfix类的容器将它们包装起来