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

Chrome浮动：右图像未对齐

1 个答案: