请参阅演示和源代码CSS+HTML（通过查看源代码） http://arcane-earth-5322.herokuapp.com/
试图让按钮和搜索框具有完全相同的高度、相同的位置（水平对齐）和相同的字体，这让我发疯。我已经接近了，但没有雪茄。
放大 200% 以查看高度差异。搜索框高 1-2 像素，看起来在页面上略低。
我也不明白为什么按钮和搜索框的计算字体大小在大多数缩放级别（包括 100%）不同。
编辑：添加以下代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1" />
<title>Responsive Test</title>
<style type="text/css">
body {
color:#555;
font-family:'Helvetica Neue';
font-size:110%;
line-height:140%;
margin:0;
padding:0;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
background:url(http://d7mj4aqfscim2.cloudfront.net/images/landscapes/duo-land_mv_c9ad01b8dcb245a1140bd5cb57158ba6.jpg) no-repeat center center fixed;
}
#header1 {
background-color:#60affe;
color:#fff;
text-align:center;
padding:10px 0px;
margin:auto;
}
#header2 {
background-color:#8fc7fe;
color:#fff;
text-align:center;
padding:10px 0px;
margin:auto;
}
#content {
margin-left:auto;
margin-right:auto;
background-color:#fafafa;
border:1px solid #ddd;
}
#content-content {
clear:both;
padding:5%;
}
#button-container {
float:left;
margin-top:15px;
text-align:center;
width:100%;
}
.button {
display:inline-block;
margin:10px;
padding:10px;
background-color:#efefef;
border:1px solid #ccc;
border-radius:2px;
color:#555;
max-width:220px;
min-width:220px;
}
.search {
display:inline-block;
}
.search_box {
margin:10px;
padding:10px;
border:1px solid #ccc;
border-radius:2px;
max-width:220px;
min-width:220px;
color:#555;
font-family:'Helvetica Neue';
font-size:110%;
line-height:140%;
font-weight:200;
}
@media (min-width: 1024px) {
#header1 { width:50%; }
#header2 { width:50%; }
#content { width:50%; }
}
@media (min-width: 768px) and (max-width:1023px) {
#header1 { width:80%; }
#header2 { width:80%; }
#content { width:80%; }
}
@media (max-width: 767px) {
#header1 { width:100%; }
#header2 { width:100%; }
#content { width:100%; }
body { font-size:140%; }
}
</style>
</head>
<body>
<div id="header1">Header 1</div>
<div id="header2">Header 2</div>
<div id="content">
<div id="button-container">
<div class="button">
Button 1
</div>
<div class="search">
<input class="search_box" name="search" placeholder="Search..." />
</div>
</div>
<div id="content-content">
<p>
Etiam at purus id ipsum sodales vehicula. Nam purus nunc, luctus ut laoreet et, pharetra eget est. Nulla
nisi tellus, euismod vel hendrerit dignissim, egestas eget ante. Morbi pellentesque, tellus ut adipiscing
vestibulum, purus orci gravida felis, sit amet rhoncus quam nulla non massa. Sed volutpat porttitor lectus
accumsan hendrerit. Donec lectus urna, euismod ut accumsan ac, congue in risus.
</p>
</div>
</div>
</body>
</html>
.search_box {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 2px;
max-width: 220px;
padding-top: 11px;
min-width: 220px;
color: #555;
height: 24px;
font-family: 'Helvetica Neue';
font-size: 110%;
line-height: 140%;
font-weight: 200;
}
为什么搜索框周围有这个div？将div 元素与其他元素内联不是最佳做法。
将字体大小：110%;也设置为按钮。