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:baseline”会发生什么情况是行内块元素在它们下方有一个间隙，大约是字母“g”的悬挂部分的大小，这可能是您看到的额外 3 个像素的高度。

于 2012-04-30T00:23:51.070 回答