0

下の各文字の間にスペースを入れたくないので、基本的なことを間違っているに違いありません。

HTML:

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>

CSS:

.icon {
    display: inline-block;
    position: relative;
    padding: 3px;
    background: yellow;
    margin: 0;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

リンク: http://jsfiddle.net/qhoc/rkRBY/

の場合を除き、各文字の間にスペースが自動的にあると思いますfont-size:0。私の要件は次のとおりです。

  • すべての文字は同じ行にある必要があります
  • さらにicon4、icon5などがあります。
  • フォントサイズを変更せずにそれらの間にスペースを入れない
  • HTML ラッパーを追加しても問題ありませんが、JS に触れたり<i>、別のものに変更したりしないでください。ちなみにBootstrapを使っています。

回避策があれば教えてください！ありがとう。

4

2 に答える 2

2

私の知る限り、2つの良い方法があります。

  • 要素間の HTML マークアップにスペースを入れないでください (または)
  • display: table-cellその要素に追加します。

これを試して：

.icon {
    display: table-cell;
    /* removed padding: 3px; */
    position: relative;
    background: yellow;
    margin: 0px;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

働くフィドル

于 2013-11-04T08:51:30.497 に答える
1

要素間にスペースがあるため、

<i class="icon icon1"></i><i class="icon icon2"></i><i class="icon icon3"></i>

デモ: http://jsfiddle.net/rkRBY/10/

于 2013-11-04T08:53:56.313 に答える