Question

我有以下代码：

<a  accesskey="b" class="icon icon-foo" href="/aa">this is a test</a>

CSS代码：

a {float: none;padding: 0 0 0 23px;}

.icon { display: block; overflow: hidden; background-repeat: no-repeat; width: 32px; height: 32px; background-image: url(http://www.burconsult.com/wp-content/uploads/2010/05/google_sprites_2.jpg); }

.icon-foo { background-position: 0 -35px; }

JS小提琴上的代码http://jsfiddle.net/RD2Ph/ 。我希望文本出现在图像的右侧。即<image(blogger one)><my anchor text> 但是现在上面的代码并没有发生这种情况。当我使用上面的代码时，图像会移位或文本被移动。你能帮我解决一下吗？

Answer 1

你过度简化了它，还需要更多的HTML。

http://jsfiddle.net/RD2Ph/11/

<a  accesskey="b" class="icon-with-text"  href="/aa">
    <span class="icon icon-foo this-icon"></span>
    <span class="text">this is a test</span>
</a>

.icon { display: block; background-repeat: no-repeat; width: 33px; height: 33px; background-image: url(http://www.burconsult.com/wp-content/uploads/2010/05/google_sprites_2.jpg); }    
.icon-foo { background-position: -21px -36px; }


a.icon-with-text { line-height: 33px;}
span.this-icon {float:left;}  
span.text {float: left; margin-left: 5px;}

Answer 2

http://jsfiddle.net/RD2Ph/2/

摆脱overflow: hidden，以便文本显示在框边界外。将其包裹在一个范围内，这样您就可以获得文本本身。 display: block;并将relative定位移至右侧。

更新：可能更像是http://jsfiddle.net/RD2Ph/9/

将超链接文本与精灵图像对齐

2 个答案: