html - 提交按钮不会正确排列

Question

我的提交按钮比搜索栏高一点。有人可以帮我弄清楚吗？我试图在按钮顶部留出边距，但没有用。感谢您提供的所有帮助。

.searchTerm {
border: 1px solid rgba(214, 214, 214, 0.6);
border-right: none;	
border-radius: 15px 0 0 15px;	
color: #c2c2c2;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
height: 34px;	
outline: none;	
padding: 5px;
text-indent: 12px;
width: 580px; 
}

.searchTerm:focus {
color: #222;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
}

.searchButton {
background-color: #ffffff;
border: 1px solid rgba(214, 214, 214, 0.6);
border-left: 0;	
border-radius: 0 15px 15px 0;	
color: #adadad;
cursor: pointer;	
font-size: 25px;
height: 46px;
margin-left:-5px;
text-align: center; 
width: 60px;   
}

.searchButton:focus {
outline: none;
}

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" class="searchTerm" placeholder="Search The Web">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</form>

Answer 1

我玩了一下你的代码，这里是工作 fiddle : https://jsfiddle.net/6e5q1v09/

.searchTerm {
   display:inline-flex;
   border: 1px solid rgba(214, 214, 214, 0.6);
   border-right: none;  
   border-radius: 15px 0 0 15px;    
   color: #c2c2c2;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   height: 32px;    
   outline: none;   
   padding-bottom:11px;
   text-indent: 12px;
   width: 580px; 
}

.searchTerm:focus {
   color: #222;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
}

.searchButton {
  display:inline-flex;
  background-color: #ffffff;
  border: 1px solid rgba(214, 214, 214, 0.6);
  border-left: 0;   
  border-radius: 0 15px 15px 0; 
  color: #adadad;
  cursor: pointer;  
  font-size: 25px;
  height: 46px;
  margin-left:-5px;
  text-align: center; 
  width: 60px;   

}

.searchButton:focus {
  outline: none;
}

编辑:我可以看到现在占位符没有正确对齐，您可以在正确设置时使用填充和高度属性。这是更正的新 fiddle :https://jsfiddle.net/6e5q1v09/