2

我想显示四个按钮，内联，它们之间没有任何间距。我有一个显示当前行为的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%;
}

实际上会将按钮排成一行，但它们之间仍有间距。我如何摆脱那个间距，使它们相互堆叠？

4

4 回答 4

7

元素之间的空白<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>
于 2013-08-03T04:10:28.233 回答
2

设置float:left为按钮。

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
    float:left;
}
于 2013-08-03T04:10:55.520 回答
1

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

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

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

于 2013-08-03T04:12:13.830 回答
1

只需使用 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>
于 2013-08-03T04:13:28.857 回答