css - Bootstrap：为什么我的输入框和按钮有间隙？

Question

请在http://jsfiddle.net/TccN5/检查我的代码。

它在输入文本框和右边的按钮之间有一个间隙。对于Bootstrap 网站上的相同标记，输入框和按钮非常贴合，没有间隙。

为什么我有差距？

Answer 1

和元素之间有额外whitespace character的 s 。将标签紧跟在元素之后：buttoninputbuttoninput

<input type="text" /><button class="btn" type="button">Any</button>

演示1

或者，应用此 css 样式：

​.input-append{
    font-size:0;
}​

演示2

Answer 2

我不知道为什么会这样，但这就是我修复它的方法。也许你有一些你自己的 css 与文本字段冲突。

这是带有修复程序的 jsfiddle http://jsfiddle.net/TccN5/2/

我刚刚添加

     style="margin-right:-4px"

给你的

     <input type="text">

Answer 3

使用input-prepend和input-append

<div class="btn-group input-prepend input-append">
    <input type="button" class="btn" value="Prev">
    <input type="text" value="">
    <input type="button" class="btn" value="Next">
<div>