Как удержать расширяющееся окно поиска от смещения кнопки отправки?

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 #отправить {

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

}

Answer 1

Проблема заключается в том, что во время анимации вход получает стиль display:block, а затем возвращается к display:inline.

Я не могу проверить решение, но сначала попытался бы всплыть в текстовом поле. Просто float:left текстовое поле (может потребоваться относительное расположение элемента формы ... не уверен).

Answer 2

Не могу гарантировать, что это является источником проблемы, но попытайтесь предотвратить окружение <form>:

#searchBox {
    white-space: nowrap;
}