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

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

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

1. 在父级中使用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;
     }

2. 将所有元素放在一起,即: <div></div><div></div>

3. 将结束标记放在下一行和下一个元素旁边,即:

   <div>
   </div><div>
   </div>
   

4. 将前一个元素的右括号放在下一行和下一个元素旁边,即:

   <div></div
   ><div></div>
   

5. 或使用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>

一种柔性引导可以发现这里和支持列表在这里

Answer 4

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