How to get search bar to align up with search input?_问答_开发者

How to get search bar to align up with search input?

开发者 https://www.devze.com 2023-02-17 08:49 出处：网络

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 Fir

相关专题：css

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.