Question

我遇到一个问题，我在这两个按钮之间有一个空格，如下图所示：

alt text 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

Answer 1

两个<input>之间的换行符会在页面上创建一个空格。您必须删除换行符，或使用此技巧：

<input id="NeedBtn" class="PostBtn" type="button" /><!--
--><input id="ProvBtn" class="PostBtn" type="button" />

Answer 2

很惊讶没人提到这个方法：

问题是正在渲染两个按钮之间的空白区域。按钮之间的任何空格（换行符，制表符，空格）将由浏览器呈现为单个空格。要解决此问题，您可以在父元素上将font-size设置为0.

我在按钮周围添加了DIV#button-container，并为其显示了font-size技巧。

注意：我还必须更改您链接的按钮背景图形上的位置，因为它周围有一些额外的像素空间。也许这是问题的一部分，也许不是。

以下是小提琴的链接：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>

Answer 3

正如其他人所指出的，你可以使用浮点数来反击元素之间的空白

<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" />

以及内联块的各种黑客攻击：

在父级中使用0px font-size并重置子元素中的font-size。

    <div class="parent">
        <div class="child">Some Text</div>
        <div class="child">Some More Text</div>
    </div>

    .parent {
       font-size:0px;
     }

     .parent > * {
       display:inline-block;
       font-size:14px;
     }

将所有元素放在一起，即：<div></div><div></div>
将结束标记放在下一行和下一个元素旁边，即：
```
<div>
</div><div>
</div>
```
将前一个元素的右括号放在下一行，然后放在下一个元素旁边，即：
```
<div></div
><div></div>
```
或使用html评论
```
<div></div><div></div>
```

正如其他人所说，这不是最佳解决方案。

现代浏览器现在可以使用Flexbox样式

<div class="flex">
    <input id="NeedBtn" class="PostBtn flex-child" type="button" />
    <input id="ProvBtn" class="PostBtn flex-child" type="button" />
</div>

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}

<div class="flex">
    <input type="button" class="flex-child" id="slide_start_button" value="Start">
    <input type="button" class="flex-child" id="slide_stop_button"  value="Stop">
</div>

可以找到flex here指南和支持列表here

Answer 4

您可以使用css来修复它。在输入按钮上设置float：left或float：right。这解决了我的问题。

Answer 5

尝试使用CSS重置 - 它可以解决浏览器差异：http://meyerweb.com/eric/tools/css/reset/reset.css

Answer 6

我看到他们有一套高度和宽度。添加overflow：hidden应该隐藏定义宽度之外的空白。正如@Pikrass指出的那样，这是消除空白的另一种选择。通常空白是一个IE问题，我之前没有注意到它。

HTML | CSS：输入按钮之间的空格

6 个答案: