Question

我想显示内联的四个按钮，它们之间没有任何间距。我有一个显示当前行为的jsfiddle。简而言之，以下HTML / CSS：

<div>
    <input id="unconfirmedYes" type="button" value="10%" />
    <input id="confirmedYes" type="button" value="98% YES" />
    <input id="confirmedNo" type="button" value="2% NO" />
    <input id="unconfirmedNo" type="button" value="90%" />
</div>

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
}
#unconfirmedYes, #unconfirmedNo {
    width: 10%;
}
#confirmedYes, #confirmedNo {
    width: 40%;
}

事实上

会将按钮向上排列，但它们之间仍然存在间距。如何摆脱那个间距，使它们相互叠加？

Answer 1

<input/>元素之间的空格是间距来自的位置。如果删除换行符并使标签完全相邻，则该空格将消失。

<div>
    <input id="unconfirmedYes" type="button" value="10%"
  /><input id="confirmedYes"   type="button" value="98% YES"
  /><input id="confirmedNo"    type="button" value="2% NO"
  /><input id="unconfirmedNo"  type="button" value="90%" />
</div>

Answer 2

将float:left设为按钮。

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
    float:left;
}

Answer 3

假设按钮之间有空格。如果将字体大小设置为零，则将删除空格。

div.give-it-a-class{
 font-size: 0;
}

详细信息可以在this问题中找到。

Answer 4

只需使用html注释即可删除html标记之间的空格。

<div>
    <input id="unconfirmedYes" type="button" value="10><!--
   --><input id="confirmedYes" type="button" value="98% YES" /><!--
   --><input id="confirmedNo" type="button" value="2% NO" /><!--
   --><input id="unconfirmedNo" type="button" value="90%" />
</div>

为什么这些按钮之间还有间距？

4 个答案: