Question

我想在用户开始输入关键字后创建像Google这样的搜索栏。我通常尝试将搜索栏与提交按钮对齐。如果我可以在Firefox中正确排列，它通常无法在Chrome中正确排列。谷歌实际上排列了两个输入，还是有办法将实际按钮放在搜索栏内并将其定位到最右边？

编辑：嗯，我想这更像是一个概念问题。我实际上没有任何代码。我只记得我上次尝试对齐搜索栏和按钮失败的尝试非常糟糕。 Google如何调整搜索框并提交按钮？

编辑2：这是我的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>

这是我的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;
}

它们仍然有点偏离。如果我给它们特定的高度，则按钮的位置开始在输入的位置上方。

Answer 1

如果你想要对彼此相邻的两个元素进行像素完美控制，我经常发现一种方法是成功地使用crossbrowser来绝对定位正确的元素，但是使用边距代替顶部/左边，如下所示：

  <html>
    <body>
      <input/>
      <input type="submit" style="position:absolute;margin:42px 0 0 10px;"/>
    </body>
  </html>

使用边距将相对于orgin的位置定位它，在这种情况下，它位于输入字段的右侧。使用top / left将相对于其偏移父项定位它，该父项可以是祖先元素。

Answer 2

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

Answer 3

你通常用一个容器包围它们并对齐它的一个边缘。删除（重置）边距为0以避免特定于浏览器的对齐问题。

如何让搜索栏与搜索输入对齐？

3 个答案: