If you mean that your search box shift down when it doesn't have enough width to expand, then you can fix this by doing the following:
#navigation {
position: relative;
}
#search {
position: absolute;
right: 0;
}
题
I'm having a problem with my menu, in which there's search form. And when the input is on focus the elements of the menu have to be with less width, but I don't know how to make it work...
<nav role="navigation" class="holder">
<ul id="navigation">
<li><a href="#" id="home">Home</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li id="search">
<form method="get" action="">
<input type="text" name="string">
<input type="submit" name="" value="Go">
<div class="c_l"></div>
</form>
<li>
</ul>
</nav>
Here is the code, in which you can see what exactly I'm trying to do: http://jsfiddle.net/YcLtw/
解决方案
If you mean that your search box shift down when it doesn't have enough width to expand, then you can fix this by doing the following:
#navigation {
position: relative;
}
#search {
position: absolute;
right: 0;
}
其他提示
You want the search input to have less width,but you write this in your css:
#navigation > #search input[type=text]:focus{width:150px;}
If you still want the width to increase when the input is focused, set the width smaller.
I add a border for the input.By the way,border:0;
should be corrected as border:none;