Html 使搜索栏具有响应性

我正在一个新的主页上工作

我们有一个搜索栏，它以前是由一个不在这里的开发人员创建的

我试图使搜索栏更靠近屏幕的右侧，但仍能做出响应。我不确定我做错了什么。我已经尝试了很多不同的方法，当我把浏览器缩小时，它只会跳到导航的下方。这是我不想发生的事情

以下是整个浅灰色条的编码：

<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>

有没有人能告诉我我做错了什么，或者有没有更好的方法来实现我的目标。如果我需要提供更多信息，请告诉我

提前谢谢你！

---

-Marcy-

搜索栏正在崩溃，因为它旁边的标记图标有一个不必要的边距

220px

，使整个搜索div的宽度为462px，这导致它在较低的屏幕大小上崩溃。。更改以下内容

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

---

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

谢谢，谢谢！！这真是太好了！非常感谢你！

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

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