Chrome浮动：右图未对齐

Question

我有这个搜索按钮，这真的让我很难受。我试图让它与搜索输入区域正确对齐，当我最终让它在 Firefox 中工作时，它决定在 Chrome 中变得很奇怪。在 Chrome 中查看时，就像按下按钮一样。

这是我的 HTML：

<div id="searchCon">    
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div>
<label class="screen-reader-text" for="s">Search Our Site:</label>
<input type="text" value="" name="s" id="s">
<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; float: right;">
</div>
</form>
</div>

这是我的 CSS：

    #searchCon {
  float: right;
  display: inline-block;
  height:37px;
  padding: 0px 10px 10px 280px;
  color:#2a2a2a;

}

我一直在阅读大量的论坛、文章等，但无法让这个小按钮在 Chrome 中正常工作。

请帮帮我！

Answer 1

试试这个：

HTML：

<div id="searchCon">    
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div style="float:left">
<label class="screen-reader-text" for="s">Search Our Site:</label>
    <input type="text" value="" name="s" id="s" />
</div>
<div style="float:right;padding-top:2px">
    <input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; " />
</div>
</form>
</div>

CSS：

#searchCon {
  float: right;
  display: inline-block;
  height:37px;
  padding: 0px 10px 10px 0px;
  color:#2a2a2a;
}