在<a href="http://www.bkd.com/new-test-2.htm" rel="nofollow">http://www.bkd.com/new-test-2.htm</a></p> <p>製作一個搜索欄響應

Question

我上了一個新的主頁工作我們以前由不同的開發者是誰已不再在這裏建一個搜索欄。

我試圖讓搜索欄進一步在屏幕的右側，但也仍然是響應。我不確定我做錯了什麼。我嘗試了很多不同的東西，當我縮小瀏覽器時，它只是跳到導航下面。這是我不想發生的事情。

這裏是整個淺灰色條編碼：

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

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更具可讀性。