如何讓擴展搜索框不會移動提交按鈕？

Question

我正在編碼一個搜索框，當您單擊頁面上的其他位置時，該搜索框將重新展開焦點並再次合同。

問題是，我有一個提交圖標在輸入框的右側，並且隨着輸入框的擴展（使用jQuery'animate'），它將提交圖標向下移動。

你可以看到我在這裏所做的：

http://dl.dropbox.com/u/7966602/ID/WebContent/index.html?x=11&y=7#

請記住，頁面顯然仍沒有這樣做。

您應該能夠查看源代碼以查看HTML和jQuery。 CSS是;

box-shadow: 0px 0px 5px #000; 
height:20px; 
float:right; 
margin-top:24px; 
margin-right:26px; 
padding-top:3px; 
padding-bottom:2px; 
border-width: 2px; 
border-style: solid; 
border-color: #e5e5e5; 
-moz-border-radius: 3px; 
border-radius: 3px; 
background: #333333; 
background-image: -moz-linear-gradient(#ffffff, #e5e5e5); 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #ffffff)); 

}

searchBoxHover＃搜尋{

font: bold 14px Arial, Helvetica; 
color: #808080; 
width:100px; 
position:relative; 
left:3px; 
top:-5px; 
background: #333333; 
background-image: -moz-linear-gradient(#ffffff, #e5e5e5); 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #ffffff)); 
border:0px; 

}

searchBoxHover #submit {

margin:0px; 
padding:0px; 
border:0px; 
width:21px; 
height:20px; 
margin-right:3px; 

}

搜索盒{

box-shadow: 0px 0px 5px #000; 
height:20px; 
float:right; 
margin-top:24px; 
margin-right:26px; 
padding-top:3px; 
padding-bottom:2px; 
border-width: 2px; 
border-style: solid; 
border-color: #333333; 
-moz-border-radius: 3px; 
border-radius: 3px; 
background: #333333; 
background-image: -moz-linear-gradient(#333333, #1e1e1e); 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e1e1e),color-stop(1, #333333)); 

}

搜索盒＃搜尋{

font: bold 14px Arial, Helvetica; 
color: #808080; 
width:100px; 
position:relative; 
left:3px; 
top:-5px; 
background: #333333; 
background-image: -moz-linear-gradient(#313131, #202020); 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #202020),color-stop(1, #313131)); 
border:0px; 

}

搜索盒#submit {

margin:0px; 
padding:0px; 
border:0px; 
width:21px; 
height:20px; 
margin-right:3px; 

}

Answer 1

的問題是輸入得到一個display:block風格，同時動畫是怎麼回事，然後返回到display:inline。

我無法測試解決方案，但我會先嚐試浮動文本框。只需float:left的文本框（您可能需要相對定位表單元素..不確定）。

Answer 2

不能保證，這是問題的根源，但要儘量避免包裹周圍0​​：

#searchBox { 
    white-space: nowrap; 
}