1

このCodePenのボタンに CSS の問題が少しあります。

最初のものはボタンの間隔を空けているようですが、その理由はわかりません。ただし、+ ボタンをクリックしてテーブルを追加すると、奇妙なスペースがなくなり、入力タイプのボタンの余白スタイルに従います。

どうすればこれを修正できますか?

4

2 に答える 2

2

基本的に、インライン要素を扱うときは空白が重要だからです。ソースコード内の<input>は空白で区切られています。（JSによって）注入されたものはそうではありません。

これにはさまざまな解決策があり、そのほとんどがこの質問にリストされています（受け入れられたものだけでなく、すべてをチェックすることをお勧めします）。それらは、順番に、次のようにグループ化できます...

1) 「タグの衝突」、要素間の空白を削除します。このようにできる...

  <input type="button" class="some_class"
/><input type="button" class="some_class"
/><input type="button" class="some_class" />

...またはこのように...

   <input type="button" class="some_class" /><!-- 
--><input type="button" class="some_class" /><!--
--><input type="button" class="some_class" />

2) 「スタイルの崩壊」 - 空白を所定の位置に残しますが、非表示にします。単純な解決策がない場合、通常、これには、これらのインライン要素の周りにコンテナーを作成し、その font-size と line-height を 0 に設定することが含まれます。

このアプローチの欠点は、そのコンテナー内の要素のこれらのプロパティを復元する必要があることです。

3) 'floating' - すべてのインライン要素をブロックに変換し、'float' スタイルを適用します。このようにして、空白も視覚的に消えます。

于 2013-09-04T16:38:40.780 に答える
0

より良い解決策があります。

「font-size:0」を親タグ「」に追加してから、「font-size:13px」を入力ボタン (クラス「.togPTbutton」) に追加するだけです。

私はあなたのコードとその動作で上記を試しました。

于 2013-09-04T17:00:13.507 に答える