个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 00:28:52 26 4
gpt4 key购买 nike

我正在尝试在用户开始输入关键字后创建一个类似 Google 的搜索栏。我通常会尝试将搜索栏与提交按钮对齐。如果我能让它在 Firefox 中正确排列，它通常不会在 Chrome 中正确排列。 Google 是否真的将两个输入排列在一起，或者是否有办法将实际按钮放在搜索栏内并将其放置在最右边？

编辑:好吧，我想这更像是一个概念性问题。我实际上没有任何代码。我只记得我最后一次尝试对齐搜索栏和按钮的尝试失败了。 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;
}

他们还差一点。如果我给它们特定的高度，那么按钮的位置就会开始高于输入的位置。

最佳答案

如果你想要像素完美地控制彼此相邻的两个元素，我经常发现跨浏览器成功的一种方法是绝对定位正确的元素，但使用边距而不是顶部/左侧，如下所示:

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

使用边距会将其定位到相对于原点的位置，在本例中它位于输入字段的右侧。使用 top/left 会相对于它的偏移父元素定位它，它可能是一个祖先元素。

关于html - 如何让搜索栏与搜索输入对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5309208/

26 4 0
文章推荐： css - IE anchor 选择器继承
文章推荐： c - 我应该怎么做才能读取c中的字符串？
文章推荐： c - 在 C 中从字符串更改为 int 时溢出
文章推荐： c - sbrk() 是如何工作的？