HTML | CSS：inputbutton之间的空间
我有一个问题，我有这两个button之间的空间，如下图所示：
替代文字http://img22.imageshack.us/img22/5066/capturebtn.png
代码如下：
<input id="NeedBtn" class="PostBtn" type="button" /> <input id="ProvBtn" class="PostBtn" type="button" /> .PostBtn { background: url(../Images/Buttons/PostButtonF.png) no-repeat; width: 50px; height: 28px; border: none; margin: 0; padding: 0; } #NeedBtn { background-position: 0 0; } #ProvBtn { background-position: -50px 0; } 我如何删除该空间？
浏览器：Firefox 3.5
IE8
两个<input>之间的换行在页面上在它们之间创build一个空格。 你必须删除换行符，或使用这个技巧：
<input id="NeedBtn" class="PostBtn" type="button" /><!-- --><input id="ProvBtn" class="PostBtn" type="button" />
惊讶没有人提到这个方法呢：
问题是两个button之间的空白正在呈现。 浏览器之间的任何空格（换行符，制表符，空格）都将被渲染为一个空格。 要解决这个问题，你可以在父元素上设置font-size为0。
我在DIV#button-container周围添加了DIV#button-container ，并在其中显示了font-size技巧。
注：我也必须改变你的链接的button背景graphics的位置，因为它有一些额外的像素空间。 也许这是问题的一部分，也许不是。
这是一个小提琴的链接： http : //jsfiddle.net/dHhnB/和代码：
<style> #button-container { font-size:0; } .PostBtn { background: url(http://img22.imageshack.us/img22/5066/capturebtn.png) no-repeat; width: 50px; height: 28px; border: none; margin: 0; padding: 0; } #NeedBtn { background-position: -4px 0; } #ProvBtn { background-position: -59px 0px; } </style> <div id="button-container"> <input id="NeedBtn" class="PostBtn" type="button" /> <input id="ProvBtn" class="PostBtn" type="button" /> </div>
正如其他人指出的，你可以使用浮动来反击元素之间的空白
<input id="NeedBtn" class="PostBtn floated" type="button" /> <input id="ProvBtn" class="PostBtn floated" type="button" />
.floated { float:left; }
.floated { float:left; }
<input id="NeedBtn" class="PostBtn floated" value="Next" type="button" /> <input id="ProvBtn" class="PostBtn floated" value="Prev" type="button" />
你可以使用CSS来修复它。 在inputbutton上设置float：left或float：right。 这为我解决了这个问题。
尝试使用CSS重置 – 它可以解决浏览器的差异： http : //meyerweb.com/eric/tools/css/reset/reset.css
我看到他们有一个高度和宽度。 添加overflow：hidden应该隐藏你定义的宽度之外的空格。 @Pikrass指出，这是消除空白的另一种select。 通常情况下，空白是一个IE问题，我没有注意到在FF之前。
