自動添加不需要的填充頂部

我目前正在研究我的網站的響應能力，並且在側邊欄中搜索並提交輸入時遇到了一些麻煩。在這個側邊欄中，我有一個主表格顯示爲一個表格，並分成兩個單元格。左邊的單元格是一個文本輸入字段，右邊的單元格是一個提交按鈕（實際上是一個充當提交按鈕的圖像）。第一件事是我無法讓它們對齊，img下的文本輸入始終是3px。自動添加不需要的填充頂部

正如你可以在此看到的jsfiddle： http://jsfiddle.net/5pNF7/

不應該有文本輸入上述任何灰色像素。我不明白爲什麼會在此文本輸入中自動添加3px的頂部填充。我該如何擺脫這種情況？

HTML：

<div id="primary" class="content-area clearfix"> 
    <div id="content" class="site-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam dui, bibendum nec porta ut, elementum id lacus</p> 
    </div> 
    <div class="sidebar-area"> 
     <div id="tertiary" class="sidebar-container"> 
      <div class="sidebar-inner"> 
       <div class="widget-area"> 
        <aside id="search-2" class="widget widget_search"> 
         <form role="search" method="get" class="search-form" action="http://foo.com"> 
          <label> <span class="screen-reader-text">Search:</span> 

           <input type="search" class="search-field" value="" name="s"> 
          </label> 
          <input type="image" class="search-submit" alt="Search" src="http://localhost/test-elisium/wp-content/themes/twentythirteen-child/resources/search-icon.png"> 
         </form> 
        </aside> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

和CSS：

.clearfix:after { 
    content:"."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.site-content { 
    float: left; 
    max-width: 55%; 
    margin-right: 7%; 
} 
.sidebar-area { 
    float: right; 
    padding: 30px 3% 0 0; 
    width:35%; 
} 
.widget { 
    background-color: #999; 
} 
.widget input[type="search"] { 
    width: 100%; 
} 
#search-2 form { 
    display: table; 
} 
#search-2 .search-form label, .search-form .search-submit { 
    display: table-cell; 
} 
.search-form .search-submit { 
    width: 24px; 
} 
.screen-reader-text { 
    clip: rect(1px, 1px, 1px, 1px); 
    position: absolute !important; 
} 
input[type="search"] { 
    -webkit-appearance: textfield; 
    border: 2px solid red; 
    padding: 5px; 
}

來源

2014-02-12 Kimberley Furson

添加此

#search-2 .search-form label, .search-form .search-submit { 
    display: table-cell; 
    vertical-align: top; 
}

http://jsfiddle.net/5pNF7/2/

隨着垂直對齊頂部，無論你的項目將對齊到頂部，而不是一個在基線對齊，另一個在頂部。

來源

2014-02-12 18:23:23 Huangism

除了將表格和子元素作爲display：table-cell，您可以使用float屬性。

#search-2 form { 
    width: 100%; 
} 
#search-2 .search-form label 
{ 
    float:left; 
    margin-right:5px; 
} 
.search-form .search-submit { 
    float:left; 
}

另外添加clearfix類來獲得float元素的全高。

更新的jsfiddle：http://jsfiddle.net/5pNF7/4/

來源

2014-02-12 18:34:46

添加此浮動給你很多whistespace的，你還必須加一個div，最大/最小寬度 – 173901

自動添加不需要的填充頂部

回答

相關問題