邊界制盒按鈕按下一半時輸入

Question

http://jsfiddle.net/Xnbf4/

當啓用邊界框我的按鈕被按下一半時輸入。從輸入中刪除填充「修復」它，但顯然不是一個真正的修復...

按鈕和輸入應內聯（不是按鈕上方的間隙）。

*, *:before, *:after { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 

.input { 
display: inline-block; 
margin: 5px; 
border: 2px solid $web-lines; 
padding: 15px; 
height: 18px; 
} 

.input-search { 
padding: 15px 25px; 
} 

.button { /*Default button */ 
display: inline-block; 
position: relative; 
margin: 5px; 
border: 0; 
border-bottom: 3px solid $web-green-darker; 
padding: 7px 15px 5px 15px; 
color: #fff; 
font-weight: 600; 
background: #4d913e; 
} 

Answer 1

你只需要添加vertical-align: middle：http://jsfiddle.net/Xnbf4/6/

.button, .input { 
    vertical-align: middle; 
} 

垂直對齊適用於任何inline元素，包括inline-block。我不確定初始屬性設置爲什麼（似乎沒有），但沒有設置它似乎會導致問題。如果有人有更多的信息，希望他們會鐘意。