如何让搜索栏与搜索输入保持一致？

我试图在用户开始键入关键字之后创建一个像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; 
}

他们仍然过一点点。如果我给他们特定的高度，那么按钮的位置开始高于输入的位置。

来源

2011-03-15 Kelp

请提供代码示例，通过猜测代码的外观很难回答您的问题。 – 2011-03-15 08:35:54

是的，请发布您的HTML＆CSS – Emmanuel 2011-03-15 08:42:24

您通常会将一个容器和一个容器的边缘对齐。删除（重置）页边距为0以避免浏览器特定的对齐问题。

来源

2011-03-15 08:46:39 GlennG

如果你想旁边的海誓山盟两个元素的像素级的控制，一种方法，我经常发现跨浏览器的成功是绝对位置的权利元素，但使用的利润率，而不是顶部/左，就像这样：

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

在这种情况下，使用边距将使其相对于orgin的位置位于输入字段的右侧。使用顶部/左侧可以将它定位在相对于它的偏移父级，这可能是一个祖先元素。

来源

2011-03-15 08:49:08

当使用position：absolute;需要[上，左，右，下]中的两个。（保证金在大多数情况下都适用，但它仍然是错误的） – elzapp 2011-03-15 09:57:49

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

来源

2011-03-15 08:50:10

如何让搜索栏与搜索输入保持一致？

回答

相关问题