html - どうすれば私の間の小さなスペースを避けることができますかそして要素？

Question

私は次のものを持っています：

<input style="width: 20px" data-ng-model="row.number" type="text" />
<span style="width: 20px">-</span>

<input>との間の小さなスペースを避けるにはどうすればよいです<span>か。また、「-」をスパンの中央に配置するにはどうすればよいですか。

IDE が複数行に再フォーマットされるので、すべてを 1 行に配置する以外の解決策が必要です。

score 3 · Accepted Answer

デフォルトでは、aspanはinlineレベル要素であり、マークアップの空白を尊重します。

これを削除するには複数の方法があります。1 つは、マークアップ内のスペースを削除することです。

<input style="width: 20px" data-ng-model="row.number" type="text" /><span style="width: 20px">-</span>

別の方法は、親要素をfont-size:0px

もう 1 つは、空白を置き換えるために負のマージンを設定することです。span { margin: -4px; }

score 2 · Accepted Answer

使用できます

要素間の HTML コメント:

<div><!--
    --><input style="width: 20px" data-ng-model="row.number" type="text" /><!--
    --><span style="width: 20px">-</span><!--
--></div>

>次の行を閉じます。

<div
    ><input style="width: 20px" data-ng-model="row.number" type="text"
    /><span style="width: 20px">-</span
></div>

font-size:0親で（必要に応じて子でリセットします）
float:leftclear:both（フローティング要素の後に要素を追加してクリアすることを忘れないでください）
遠い将来、私たちはを使えるようになるでしょうtext-space-collapse: trim-inner。現在サポートされておらず、仕様は実装の準備が整っていないドラフトであることに注意してください。

score 1 · Accepted Answer

結合と分割の手法を使用することを検討してください。

<input style='width:20px;' data-ng-model='row.number' type='text' /><span
style='width:20px;'>-</span>

タグを開いた後の改行に注意してください。これは、長い行と見せかけの空白のバランスを取るテクニックです。

score 0 · Accepted Answer

0

HTMLの同じ行に入力とスパンを配置します

于 2013-11-03T03:41:56.613 に答える

5 に答える 5