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

我有以下代码：

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

jsfiddle上的代码 . 我希望文本位于图像的右侧。i、 e

但是现在，上面的代码并没有出现这种情况。当我玩上面的代码时，要么图像移位，要么文本移位。你能帮我解决这个问题吗？

摆脱溢出：隐藏，这样文本显示在框边界之外。将其包装成一个跨距，以便可以看到文本本身<代码>显示：块并使用

相对定位将其向右移动

更新：可能更像这样
您已经过度简化了它，还需要一些html



.icon{显示：块；背景重复：无重复；宽度：33px；高度：33px；背景图像：url(http://www.burconsult.com/wp-content/uploads/2010/05/google_sprites_2.jpg); }    
.icon foo{背景位置：-21px-36px；}
a、 文本为{行高：33px；}的图标
span.this-icon{float:left；}
span.text{float:left；margin left:5px；}
宽度是多少？文本不是单行的。我希望文本根据锚的容器自动包装。哦，我明白了，对不起，我还没有喝咖啡什么的。正在更新我的答案。p效果！，咖啡起作用了：）只有一件事需要在超链接中使用span标记来完成我需要的内容吗？使用左边填充而不是边距来使整个内容可点击：
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; }

<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;}