Question

我正在尝试使用精灵图片创建在Facebook，Twitter等上关注的链接。在这些精灵图像设置为背景的链接之后有一个纯文本。我在调整文本，跨度以及＆＃39; a＆＃39;垂直链接。

这是css

.sprite a {
    border:solid 1px blue;
    width:20px;
    height:20px;
    display:inline-block;
    color:#00f;
    background:url('images/sprite.png') 0 0;
}

span {
    border: solid 1px red;
}

这是HTML

<div class="sprite">
    Follow us on: <span id="spriteFacebook"><a href="http://facebook.com"></a></span>
</div>

我正在使用边框来识别错位

这就是结果的样子

preview image of the problem http://i60.tinypic.com/1zco1z5.png

默认不应该对齐这些吗？我应该使用浮动div来实现这个目标吗？

Answer 1

试试：
- 在文字周围打一个跨度：<span class="text">Follow us on:</span>
- 向左漂浮并给它一个行高：span.text { float: left; line-height: 33px; }

http://jsfiddle.net/6s4HM/20/

<span>和<a> tags not aligning vertically</a> </span>

1 个答案: