Css 为什么我的搜索框与同一div中的按钮大小不尽相同？高1-2倍。还有为什么不'；字体大小不匹配吗？_Css

Css 为什么我的搜索框与同一div中的按钮大小不尽相同？高1-2倍。还有为什么不'；字体大小不匹配吗？

css

Css 为什么我的搜索框与同一div中的按钮大小不尽相同？高1-2倍。还有为什么不'；字体大小不匹配吗？,css,Css,请参阅的演示和源CSS+HTML（通过查看源代码）试图使按钮和搜索框的高度、位置（水平对齐）和字体完全相同，真让我抓狂。我已经接近了，但没有雪茄放大200%以查看高度差异。搜索框高1-2倍，在页面上看起来稍微低一点我也不明白为什么按钮和搜索框的计算字体大小在大多数缩放级别（包括100%）是不同的编辑：添加以下代码： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=

请参阅的演示和源CSS+HTML（通过查看源代码）

试图使按钮和搜索框的高度、位置（水平对齐）和字体完全相同，真让我抓狂。我已经接近了，但没有雪茄

放大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>


响应性试验
身体{
颜色：#555；
字体系列：'Helvetica Neue'；
字体大小：110%；
线高：140%；
保证金：0；
填充：0；
-moz背景尺寸：封面；
-webkit背景尺寸：封面；
背景尺寸：封面；
背景：url(http://d7mj4aqfscim2.cloudfront.net/images/landscapes/duo-land_mv_c9ad01b8dcb245a1140bd5cb57158ba6.jpg)无重复中心固定；
}
#校长1{
背景色：#60affe；
颜色：#fff；
文本对齐：居中；
填充：10px 0px；
保证金：自动；
}
#校长2{
背景色：#8fc7fe；
颜色：#fff；
文本对齐：居中；
填充：10px 0px；
保证金：自动；
}
#内容{
左边距：自动；
右边距：自动；
背景色：#fafafa；
边框：1px实心#ddd；
}    
#内容{
明确：两者皆有；
填充：5%；
}  
#按钮容器{
浮动：左；
边缘顶部：15px；
文本对齐：居中；
宽度：100%；
}   
.按钮{
显示：内联块；
利润率：10px；
填充：10px；
背景色：#EFEF；
边框：1px实心#ccc；
边界半径：2px；
颜色：#555；
最大宽度：220px；
最小宽度：220px；
}         
.搜索{
显示：内联块；
}
.搜索框{
利润率：10px；
填充：10px；
边框：1px实心#ccc；
边界半径：2px；
最大宽度：220px；
最小宽度：220px；
颜色：#555；
字体系列：'Helvetica Neue'；
字体大小：110%；
线高：140%；
字号：200；
}
@介质（最小宽度：1024px）{
#标题1{宽度：50%；}
#标题2{宽度：50%；}
#内容{宽度：50%；}
}
@介质（最小宽度：768px）和（最大宽度：1023px）{
#标题1{宽度：80%；}
#标题2{宽度：80%；}
#内容{宽度：80%；}
}
@介质（最大宽度：767px）{
#标题1{宽度：100%；}
#头2{宽度：100%；}
#内容{宽度：100%；}
正文{字体大小：140%；}
}
标题1
标题2
按钮1

在purus id ipsum sodales vehiclula的Etiam。Nam purus nunc，luctus ut laoreet et，pharetra eget et。纳拉
nisi tellus，euismod vel hendrerit Dignessim，egestas eget ante。莫比·佩伦茨克，告诉我们这是一次告别
前庭，妊娠期猫咪的睾丸，坐在非按摩区。帕特·波特提托·莱克图斯酒店
accumsan hendrerit。不要选择乌纳，欧伊斯莫德和阿库姆桑，在里苏斯的康格。

为什么要在搜索框中搜索？将div元素与其他元素内联不是最佳实践

设置字体大小：110%；也可以单击按钮。

抱歉，如果缩放浏览器和/或调整视口大小，则此操作无效。这是一个响应式网站的原型，我需要按钮和搜索框在任何缩放级别和任何视口中匹配。我在

上将字体大小
更改为100%。搜索框

并删除搜索框周围的

div

。我想差不多就这样了。谢谢你的提示。

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