垂直对齐输入

Question

这是我的代码：http://jsfiddle.net/jfxrykw7/

<form class="search">
<input type="text" class="input text" placeholder="Keyword">
<input type="A" class="input text" placeholder="B">
<input type="submit" class="btn submit">
</form>

.input {
margin:0;
border: 1px solid #c8d1d7;
font-size: 14px;
padding: 10px 12px;
font-weight: 300;
border-radius: 3px;
box-sizing: border-box;
}

.input_form {
width: 100%;
display: block;
}

.search {
width: 728px;
margin: 0 auto;
}


.search .text {
   width: 300px; 
   margin-right: 30px; ;
}

.search .submit {
background-size: 20px 20px;
background-image: url('http://www.clker.com/cliparts/n/U/H/1/H/u/search-icon-white-one-hi.png');
background-repeat: no-repeat;
background-position: center;
font-size: 0;
height: 38px;
width: 60px;
}

我无法理解为什么提交按钮比其他输入低？我做错了什么？

Answer 1

只需添加

.submit{

    vertical-align:middle;
}

FIXED DEMO

或

.submit{

    vertical-align:top;
}

DEMO

Answer 2

您可以在提交按钮上添加vertical-align:top：

.search .submit {
background-size: 20px 20px;
background-image: url('http://www.clker.com/cliparts/n/U/H/1/H/u/search-icon-white-one-hi.png');
background-repeat: no-repeat;
background-position: center;
vertical-align: top;
font-size: 0;
height: 38px;
width: 60px;
}