Question

在http://arcane-earth-5322.herokuapp.com/

上查看演示和源CSS + HTML（通过视图来源）

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

放大200％以查看高度差异。搜索框高1-2px，看起来在页面上略低。

我也不明白为什么按钮和搜索框的计算字体大小在大多数缩放级别（包括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>

Answer 1

.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元素与其他内容联系起来并不是最好的做法。

设置font-size：110％;也是按钮。

为什么我的搜索框与同一div中的按钮大小不一样？较高的1-2px。另外为什么字体大小不匹配？

1 个答案: