How to get search bar to align up with search input?
I am trying to create a search bar like Google's after the user begins to type in a keywords. I usually try to align the search bar with the submit button. If I can get it to line up correctly in Firefox, it usually won't line up correctly in Chrome. Is Google actually lining up the two inputs, or is there a way to put the actual button inside of the search bar and position it to the very right?
Edit: Well, I guess it is more of a conceptual question. I do not actually have any code. I just remember my last attempts to try to align the search bar and button failed horribly. How does Google align up their search box and submit button so well?
开发者_开发问答Edit 2: Here is my HTML:
<form method="get" action="">
<div id="search-outer">
<input id="search-input" type="text" name="search" /><input id="search-submit" type="submit" value="Search" />
</div></form>
Here is my CSS:
#search-outer {
width: 600px;
margin: 0 0 10px 0;
}
#search-input {
margin: 0;
width: 400px;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
#search-submit {
margin: 0;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
They are still off a little bit. If I give them specific heights, then the button's position begins to be above the input's position.
If you want pixel-perfect control of two elements next to eachother, one approach I often find crossbrowser successful is to absolute position the right element, but use margins instead of top/left, like so:
<html>
<body>
<input/>
<input type="submit" style="position:absolute;margin:42px 0 0 10px;"/>
</body>
</html>
Using margins will position it relative to its position of orgin, which is on the right of the input field in this case. Using top/left would position it relative to its offset parent, which could be an ancestor element.
<form method="post" action="">
<div id="div">
<input type="text" />
<input type="submit" value="send" />
</div>
</form>
#div { width: 100px; margin: 0 auto; text-align: center;}
You'd generally surround both with a container and align to one edge of that. Remove (reset) margins to 0 to avoid browser-specific alignment issues.
加载中,请稍侯......
精彩评论