2

4 つのボタンをインラインで間隔をあけずに表示したいと考えています。現在の動作を示す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

ボタンの間に空白があることを前提としています。フォント サイズを 0 に設定すると、スペースが削除されます。

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 に答える