Блог

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

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

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

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

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

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