Совместите текст гиперссылки со спрайтом - PullRequest
Новая
       3

Совместите текст гиперссылки со спрайтом

1 голос
/ 07 октября 2011

У меня есть следующий код: 

<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> Но сейчас это не происходит с приведенным выше кодом. Когда я играю с вышеприведенным кодом, изображение либо смещается, либо текст смещается. Можете ли вы помочь мне решить эту проблему?

Ответы [ 2 ]

2 голосов
/ 14 октября 2011

Вы слишком упростили его, вам также нужно немного больше 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;}
0 голосов
/ 07 октября 2011

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

Избавьтесь от overflow: hidden, чтобы текст отображался за пределами границ поля.Оберните его в промежуток, чтобы вы могли получить сам текст.display: block; и переместите его вправо с позиционированием relative.

Обновление: возможно, что-то похожее на это http://jsfiddle.net/RD2Ph/9/

...