CSS:无法将按钮和输入对齐在一起

Question

在 Twitter Bootstrap 中 documentation , 有一种有趣的方法可以在输入旁边附加一个按钮。

举例说明:

<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>

在我的例子中，我试图利用这个概念，但按钮稍大(一个像素)，我无法弄清楚是什么原因造成的。

我创建了一个 fiddle ，希望有人能指出正确的方向。

http://jsfiddle.net/houmie/FkEnm/2/

Answer 1

我猜您的 CSS 中有其他原因导致了此问题。您可以通过覆盖您的 css 来解决这个问题。在 .btn 类上将 line-height 从 20px 设置为 19px:

.btn { line-height: 19px } 

工作 DEMO