对齐超链接文本与子画面图像

我有以下代码：对齐超链接文本与子画面图像

<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> 但现在它没有发生上述代码。当我玩上面的代码时，图像被移动或文本被移动。你能帮我解决这个问题吗？

来源

2011-10-07 Rocky Singh

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

摆脱overflow: hidden使文本显示框范围之外了。将其包装在一个范围内，以便可以查看文本本身。 display: block;并将其移动到relative的位置。

更新：可能更多的东西像这样http://jsfiddle.net/RD2Ph/9/

来源

2011-10-07 12:57:22

怎么样的宽度是多少？文本并不是单行的。我希望文本自动换行符合锚的容器。 –

哦，我明白了，对不起还没有喝过我的咖啡或什么的。更新我的答案。 –

pefect !,咖啡工作:)只有一件事情是有必要使用超链接内的span标签来完成我所需要的？ –

你过于简单化了，需要更多的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;}

来源

2011-10-13 21:39:32

使用填充左侧而不是边距使整个事物可点击：http://jsfiddle.net/RD2Ph/12/ –

对齐超链接文本与子画面图像

回答

相关问题