浮动不起作用。为什么？

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。