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

 #search { float:right;}

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

我也认为没有理由在<span>标签中包装您的表单。

我刚注意到你也错过了一个;宽度：100％后，应阅读

 width:100%;

Answer 2

因为您的表单标记是块级元素。使您的表单标记和锚标记都向左浮动，它将排列正常。

Answer 3

只需将你的#search div向右移动并移除跨度，就没有意义。

Example here

漂浮不起作用。为什么？

3 个答案: