漂浮不起作用.为什么？

Question

这真的很烦我,我试过找一个解决方案,但无济于事.在我的网站的标题中,您可以看到搜索栏位于徽标下方,我只想在标题的最右侧.这似乎是一个简单的修复,但我无法解决这个问题.

这是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更改为

 #search { float:right;}

并且如上面的答案所说的给它一个宽度

我也认为没有任何理由将表单包装在<span>标签中.

我刚注意到你也错过了一个; 宽度:100%后,应阅读

 width:100%;