使搜索栏响应

Question

我正在创建一个新主页http://www.bkd.com/new-test-2.htm

我们有一个搜索栏，该搜索栏以前是由不再在这里的其他开发人员构建的。

我正在尝试使搜索栏更靠近屏幕右侧，但仍然可以响应。我不确定我做错了什么。我尝试了很多不同的方法，当我将浏览器缩小时，它只会跳到导航下方。这是我不希望发生的事情。

这是整个浅灰色条的编码：

<div class="clear"></div>
<div class="span-8"> 
    <a class="left"  style="padding: 0px 0px 0px 0px; margin-left: 80px;" href="/">
    <img src="/images/common/header/logo.png"  border="0"></a> </div>
    <div style="margin-top:25px;" class="span-0 last">
    <form action="/search/">
        <input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
        <input type="text" name="zoom_query" value="Search" style=" background-   image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
    </form>
</div>

谁能告诉我我做错了什么或更好的方法来实现我想要做的事情。如果我需要提供更多信息，请告诉我。

提前感谢您！ -马西-

Answer 1

搜索栏正在分解，因为它旁边的标记图标有220px 的不必要边距，使整个搜索 div 的宽度为 462px，这导致它在较小的屏幕尺寸上分解..更改以下内容

<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">

到

<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">

要将搜索栏向右移动，请将float:right 应用于容器 div，如下所示：

<div style="margin-top:25px; float:right" class="span-0 last">

我建议使用外部样式表而不是应用内联样式，外部样式表可能会被缓存，因此在连续访问时加载可能会变得更快。它也使您的 html 更具可读性。