HTML|CSS：输入按钮之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2095886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML|CSS: Space between input buttons
提问by Shawn Mclean
I have a problem in which I have a space between these two buttons.
我有一个问题，我在这两个按钮之间有一个空格。
The code is as follows:
代码如下：
<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;
}
How do I remove that space?
我如何删除该空间？
Browser: Firefox 3.5
浏览器：火狐 3.5
IE8
IE8
回答by Pikrass
The line feed between the two <input>s creates a space between them on the page. You have to remove the line feed, or use this trick :
两个<input>s之间的换行在页面上在它们之间创建了一个空间。您必须删除换行符，或使用此技巧：
<input id="NeedBtn" class="PostBtn" type="button" /><!--
--><input id="ProvBtn" class="PostBtn" type="button" />
回答by Matthew
Surprised no one mentioned this method yet:
没想到还没有人提到这个方法：
The problem is the white-space between the two buttons is being rendered. Any white-space (line breaks, tabs, spaces) between the buttons will be rendered as a single space by the browser. To fix this, you can set the font-sizeto 0 on a parent element.
问题是两个按钮之间的空白正在呈现。按钮之间的任何空白（换行符、制表符、空格）都将被浏览器呈现为单个空格。要解决此问题，您可以font-size在父元素上将设置为 0。
I've added DIV#button-containeraround the buttons and a style for it showing the font-sizetrick.
我DIV#button-container在按钮周围添加了一个样式来展示这个font-size技巧。
Note: I also had to change the positioning on the button background graphic you linked since it had some extra pixel space around it. Maybe this was part of the problem, maybe not.
注意：我还必须更改您链接的按钮背景图形上的位置，因为它周围有一些额外的像素空间。也许这是问题的一部分，也许不是。
Here's a link to the fiddle: http://jsfiddle.net/dHhnB/and the code:
这是小提琴的链接：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>
回答by Patrick Evans
As others have pointed out you can use floats to counter act the whitespace between elements
正如其他人指出的那样，您可以使用浮动来抵消元素之间的空白
<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" />As well as the various hacks for inline-block:
以及内联块的各种技巧：
- Using 0px font-size in parent and resetting the font-size in the child elements.
- 在父元素中使用 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;
}
- Putting all the elements next to each other, ie:
<div></div><div></div> Putting the closing tag on the next line and next to the next element, ie:
<div> </div><div> </div>Putting the closing bracket of the previous element on the next line and next to the next element, ie:
<div></div ><div></div>Or using html comments
<div></div><!-- --><div></div>
- 将所有元素并排放置，即：
<div></div><div></div> 将结束标记放在下一行和下一个元素旁边，即：
<div> </div><div> </div>将前一个元素的右括号放在下一行和下一个元素旁边，即：
<div></div ><div></div>或者使用 html 注释
<div></div><!-- --><div></div>
And as stated by others this isn't an optimal solution.
正如其他人所说，这不是最佳解决方案。
With modern browsers Flexbox styles can now be used
现在可以在现代浏览器中使用 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>回答by Einar ólafsson
You can use css to fix it. Set float:left or float:right on the input buttons. That fixed the problem for me.
您可以使用 css 来修复它。在输入按钮上设置 float:left 或 float:right 。那为我解决了问题。
回答by vectran
Try using a CSS reset - it may solve the browser discrepancy : http://meyerweb.com/eric/tools/css/reset/reset.css
尝试使用 CSS 重置 - 它可能会解决浏览器差异：http: //meyerweb.com/eric/tools/css/reset/reset.css
回答by neatlysliced
I see they have a set height and width. Adding overflow: hidden should hide the whitespace outside of your defined width. That is an alternative to eliminating the whitespace, as @Pikrass noted. Usually the whitespace is a IE problem, I've not noticed it in FF before.
我看到它们有固定的高度和宽度。添加溢出：隐藏应该隐藏定义宽度之外的空白。正如@Pikrass 指出的那样，这是消除空格的替代方法。通常空格是 IE 的问题，我以前在 FF 中没有注意到它。
