對齊超鏈接文本與子畫面圖像

我有以下代碼：對齊超鏈接文本與子畫面圖像

<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/ –

對齊超鏈接文本與子畫面圖像

回答

相關問題