私は、最良の構造についていくつかのCSSの専門家のアドバイスを探しています。私は水平の 'リスト'にアイコンの代わりにスプライトを実装しています。現在のHTMLは次のようである：アンカータグにCSSスプライトを使用する
<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>
など
だから私はスプライトと交換してください。私は使用しています
<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>
しかし、これを行うには、タグのインラインブロックと幅を与えます。私はインラインブロックが好きではなかったし、それはちっぽけなようだ。
もっと良い選択肢はありますか？ （ネストされたスパン、divラッパー？）
@karishma：inline-blockは良い選択ですが、そうしたくない場合は、以下のCSSを使用できます。 1）それは、マークアップスペース& 2を節約するため
a.sprite_img_a{
background:url('image.jpg') no-repeat 0 0 ;
float:left;
display:block;
width:30px;
height:30px;
}
a.sprite_img_a:hover{
background-position:-20px 10px ;
}
それはGoogleが不要な画像のキャッシュを避けるためにSEOの目的のために良いことだ）、バックグラウンドでアイコン画像を使用することが良いことです。私は通常、次のように行う
：ここ
<a class="button sprite" href="#"><span class="sprite">Blah</span></a>
は、CSSです：
.sprite{
background: url("../images/sprite.png") no-repeat scroll left top transparent;
}
.button{
background-position: 0 -80px;
color: white;
display: block;
float: left;
font-size: 0.75em;
height: 28px;
line-height: 28px;
margin-top: 7px;
overflow: hidden;
padding-left: 5px;
text-decoration: none;
cursor: pointer;
}
.button span{
background-position: right -80px;
height: 28px;
color: white;
display: block;
float: left;
padding: 0 10px 0 5px;
position: relative;
text-transform: uppercase;
text-decoration: none;
}
私はあなたの技術が@sandeepと@のはたけカカシ-好き。いくつかの可能な改善（質問の範囲を超えているかもしれないが）。以下のようなあなたのリストとHTMLを構築してみてください。
<style>
/* let your UL and LI handle the link positioning */
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */
ul.sprites li a {
display:block;
/*sprite dimensions*/
width:30px;
height:30px;
background: url('..images/spritesSheet.png') 0 0 no-repeat;
/*hide link text*/
text-indent: -9999em
overflow: hidden;
text-align: left;
}
/*adjust the background of the single sprite image file*/
ul.sprites a.spriteName1 {background-position:x y;}
ul.sprites a.spriteName1:hover {background-position:x y;}
ul.sprites a.spriteName2 {background-position:x y;}
ul.sprites a.spriteName2:hover {background-position:x y;}
/* etc...*/
</style>
<html>
<ul class="sprites">
<li><a class="spriteName1" href="#">link1</a></li>
<li><a class="spriteName2" href="#">link2</a></li>
</ul>
</html>
この方法では、カスケードはあなたのために働くと、このリスト内のすべてのリンクは、冗長クラス名なしスプライトスタイリングを得ることができます。そして、親要素が位置を扱えるようにします。少なくとも、それは正しいと思います。文法や擬似コードに対する謝罪は、私が書いたように、ちょっと素早く汚れています。
なぜインラインブロックが必要ですか？あなたのリンクに高さを与えるのですか？ –
はい。何かが高さを強制する必要があります。 – Karishma