基本的CSS對齊問題

Question

我正在寫HTML導航，使用ul，li元素，

我的html是。

<div id="header"> 
     <div id="topmenu"> 
       <div id="logo"> 
        <img src="img/logo-left.png" alt="BhatkalNews" /> 
       </div> 

       <div id="navigation"> 
        <ul> 
         <li>Contact</li> 
         <li>Photo</li> 
         <li>Video</li> 
        </ul> 
       </div> 
     </div> 
</div> 

我已經使用了reset.css，這裏是css代碼。

/* top-menu */ 
div#topmenu { 
    width:940px; 
    margin:0 auto!important; 
} 
div#logo { 
    width:289px; 
    padding: 30px 0 0 0; 
} 

/*navigation */ 

div#navigation { 
    width:446px; 
    float:left; 
} 

導航div將ul，li放置在徽標下面，而我希望它從徽標後面的左側對齊它。我錯過了什麼？

Answer 1

您的#logo元素應包含float: left;。我不知道如果#navigation應該有float的風格，但如果你想保留它，你應該#navigation後立即與風格clear:both再添div元素：

<div id="navigation"> 
    <ul> 
     <li>Contact</li> 
     <li>Photo</li> 
     <li>Video</li> 
    </ul> 
</div> 
<div style="clear:both; width: 1px;" /> 

這應該做的伎倆:)

Regards

Answer 2

將float:left添加到#logo - 這將對齊這兩個元素。

請參閱http://css.maxdesign.com.au/floatutorial/introduction.htm