如何让扩展搜索框不会移动提交按钮？

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