如何保持扩展搜索框移动提交按钮？

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 #search {

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;

}

searchBox {

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

}

searchBox #search {

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;

}

searchBox #submit {

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

}

Answer 1

无法保证这是问题的根源，但请尽量阻止周围的<form>包装：

#searchBox {
    white-space: nowrap;
}

Answer 2

问题是输入在动画进行时获得display:block样式，然后返回display:inline。

我无法测试解决方案，但我会首先尝试浮动文本框。只需float:left文本框（您可能需要相对定位表单元素..不确定）。