Question

我正在尝试对齐搜索按钮和搜索框，我在谷歌浏览器中工作，但不是IE或移动版Safari / Chrome。

我使用的CSS是：

#search input {
  background: none repeat scroll 0 0 #fff;
  padding: 10px;
  border: 0 none;
  color: #7F7F7F;
  font: 20px 'Open Sans', sans-serif;
  transition: background 0.3s ease-in-out 0s;
  width: 500px;
  height: 40px;
  margin: 0 auto;
  display: inline-block;
}

#search button {
padding: 21px;
  background: url("search.png") no-repeat scroll center center #7eac10;
  cursor: pointer;
  height: 60px;
  text-indent: -99999em;
  transition: background 0.3s ease-in-out 0s;
  width: 60px;
  border: 2px solid #fff;
  margin: 0 auto;
  display: inline-block;
  margin-top: 3%;
}

HTML：

<form id="search" action="/index.php">
> 
> <p><b></b> <input type="text" class="search" placeholder="Enter A
> Domain Name or IP address."name="domain" id="domain" value=""> 
> <button value="lookup"></p></button> </form>

任何帮助将不胜感激！

网址为http://rapidwhois.uk

Answer 1

请尝试：

#search button, #search input {
vertical-align: middle;
}

Answer 2

您的布局上还有其他问题，但基本问题是您在CSS中缺少正确的vertical-align。

只需将vertical-align: text-top添加到INPUT和BUTTON标记中，然后从按钮中删除边距即可。

然后，您只需要在容器元素上使用填充，以获得与以前相同的布局。（会给你一个更好的例子，但你没有一个孤立的测试用例，我只是在我的IE中确认了这一点。）

Answer 3

这里应该为你做，用这样的标签包裹按钮

  <label for="btn">
        <input type="text" class="search" placeholder="Enter A Domain Name or IP address."name="domain" id="domain" value=""/>
<button id="btn" value="lookup">lookup</button>
     </label>

搜索框上的IE css对齐问题

3 个答案: