2

リンクの後にアイコン付きのリンクを取得する必要があります。

例えば：

Link [icon]

私が欲しい行の高さは30pxです。だから、私はそのようなマークアップを持っています:

<div class="phone-support">
   <a href="#">We'll call you</a><i class="icon"></i>
</div>

.phone-support a {
   display       : inline-block;
   line-height   : 30px;
   padding-right : 5px;
   height        : 30px;
}

.phone-support i.icon {
   display       : inline-block;
   height        : 30px;
   width         : 30px;
   background    : url('/path/to/sprite.png') -10px -10px;
}

動くはずだと思ったのですが、高さ.phone-supportが41pxになってしまいますが、なぜでしょうか？また、要素は垂直方向に整列していません。彼らは毎回単純に滞在しますが、なぜこれが起こるのですか?

PS 私のブラウザは Chromium 18 です。ie-inline-block-fix などがないことに注意しないでください。CSS コードは、問題を指摘するためだけに単純化されています。

ここに画像の説明を入力

4

2 に答える 2

8

jsBin デモ

<i>の中に入れてください<a>。利益？あなたのイメージはリンク可能になります。

<div class="phone-support">
   <a href="#">We'll call you  <i class="icon"></i> </a>
</div>

a を設定して、イメージを親vertical-align:top;の上部に設定するよりも。<a>

.phone-support i.icon {
     display       : inline-block;
     vertical-align: top;
     height        : 30px;
     width         : 30px;
     background    : url(your url here);
     margin-left   : 10px;  /*add some space*/
}
于 2012-04-30T00:37:00.077 に答える
5

CSS の「vertical-align」プロパティを設定してみてください。ほとんどの要素では、デフォルトで「ベースライン」に設定されていますが、これはおそらく唯一望ましくないものです。私は "vertical-align: middle" を好む傾向があります。

"vertical-align:baseline" で何が起こるかというと、インライン ブロック要素の下に文字 "g" のぶら下がっている部分のサイズの隙間ができることです。

于 2012-04-30T00:23:51.070 に答える