html - CSS:将高度对齐的按钮附加到输入

Question

假设我不想使用 Bootstrap。 您如何通过按钮实现输入的完美垂直对齐？当我这样做时，按钮垂直错位。我不想在顶部边缘使用“hacking”来解决这个问题，因为我担心它在所有浏览器上看起来都不太好。

bootstrap 是如何实现这种魔力的？

我的目标是这样的:

Answer 1

我认为答案是使用 box-sizing: border-box，就像 bootstrap 所做的那样。这适用于所有最新的现代浏览器:

<input type="text" placeholder="Your text here">
<button>Button</button>

input{
    float: left;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button{
    float: left;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/4dgzbc3y/