0

順序付けられていないリストにあるいくつかのテキスト リンクに一連のアイコンを含む画像を使用しようとしていますが、テキストの横にスペースがあるアイコンを 1 つしか表示できません。ここに私が持っているものがあります:

http://jsfiddle.net/XyVtq/2/

私のCSS：

#head_about {    background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    width: 9px;    height: 18px; display:block; margin-left:20px;  }​

私のhtml：

<ul>
        <li><a id="head_about" href="test.html" >About Us</a></li>
 </ul>​

左パディングを追加すると、画像全体でより多くのアイコンが表示されます。する方法はありますか

4

1 に答える 1

1

スプライトをコンテンツから分離します。通常、スプライト専用のアイコン タグを html に追加し、リンクを個別にスタイルします。

これを参照してください：http://jsfiddle.net/XyVtq/1/

<ul id="header_pages">
  <li>
    <i id="icon"></i> <a id="head_about" href="<?php echo tep_href_link(FILENAME_ABOUT_US); ?>" >About Us</a>
  </li>
</ul>​

#icon {
  background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    
  width: 9px;    
  height: 18px; 
  display:inline-block
} 

li a {
   margin-left:18px;   
}
于 2012-10-23T04:18:03.503 に答える