浮動不起作用。爲什麼？

Question

這真的很煩我，我試過尋找解決方案，但無濟於事。 在My Website的標題中，您可以看到搜索欄位於徽標下方，我只是希望它位於標題的最右側。這似乎是一個簡單的修復，但我無法爲我的生活工作。

這裏的HTML

<div id="header"> 
<div id="logo"> 
<a href="http://www.otherwords.info/index.php"><img src="images/otherwordslogo.jpg" /></a> 
</div> 
<div id="search"> 
<span> 
<form method="post" action="search.php?op=Search" id="form"> 

<input type="text" value="Search Phrase" onfocus="if(this.value == 'Search Phrase'){this.value = '';}" size="40" name="q"> 

<input type="submit" value="Search" name="submit"> 

</form> 
</span> 
</div> 
</div> 

這裏的CSS

#search { float:left;} 

#logo { float:left; } 


div#header { 
    vertical-align:top; 
    width:100% 
    clear: both; 
    height: 150px; 
    background-color: aqua; 
    padding: 1px; 


} 

Answer 1

更改＃搜尋到

#search { float:right;} 

和上面的回答說，給它一個寬度

我也不要以爲您是否有理由將您的表格打包成<span>標籤。

我剛剛注意到你也失蹤了;在寬度：100％之後，應該讀取

width:100%; 

Answer 2

因爲您的表單標記是塊級元素。讓你的表單標籤和你的錨標籤都向左浮動，它將排隊罰款。

Answer 3

只是浮動你的＃搜索權利，並刪除跨度，這是沒有意義的。

Example here。