如何用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

，那麼你應該.secondardMenu後，用clearfix class'd容器可能添加clear: both風格的容器或包裝材料他們兩個