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

【问题标题】：HTML|CSS: Space between input buttonsHTML|CSS：输入按钮之间的空间
【发布时间】：2011-01-06 22:37:06
【问题描述】：

我有一个问题，我在这两个按钮之间有一个空格。

代码如下：

<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;
}

如何删除该空间？

浏览器：火狐3.5

IE8

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

这正是我所需要的。我在表格单元格中有按钮，它们增加了讨厌的额外空间。给他们浮动：左固定它！

【解决方案2】：

正如其他人指出的那样，您可以使用浮点数来抵消元素之间的空白

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

以及 inline-block 的各种 hack：

在父元素中使用 0px 字体大小并在子元素中重置字体大小。

    <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 cmets
```
<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 找到

【讨论】：

【解决方案3】：

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

问题是两个按钮之间的空白被渲染。按钮之间的任何空白（换行符、制表符、空格）都将被浏览器呈现为单个空格。要解决此问题，您可以在父元素上将 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>

【讨论】：

这个答案让我意识到你不仅要删除换行符，还要删除下一行的任何缩进。
整洁。我使用过浮点数，但在某些情况下这可能会更好。如果你在容器中有文本，你就完蛋了。
您可以在font-size:0 容器内为文本创建一个单独的容器，并将字体大小更改为您想要的任何内容。使用此方法的唯一问题是您丢失了字体大小继承。也就是说，如果你的 body 有 14pt 大小，你必须在这些内部文本容器上重新定义它。
Obs：在这种情况下，safari 不接受 0px 字体大小。我已经在其他浏览器上进行了测试，并且可以正常工作。

【解决方案4】：

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

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

【讨论】：

换行导致空格，他的意思是这样输入：而不是将它们放在单独的行上。
把放在一行.
对不起，如果我没有使用清晰的词，英语不是我的母语。
您不必这样做。这是我正在使用的技巧（有点像 Kerrick，但我认为更优雅）：<input ... /><input ... />
使用注释块是使用 CSS 属性（浮动或显示）的糟糕替代品，就像其他答案一样。这是 hacky，并且无助于解决任何未来的网格对齐问题。

【解决方案5】：

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

【讨论】：

【解决方案6】：

我看到它们有固定的高度和宽度。添加溢出：隐藏应该隐藏定义宽度之外的空白。正如@Pikrass 指出的那样，这是消除空格的替代方法。通常空白是IE的问题，我之前在FF中没有注意到。

【讨论】：