Question

我正在寻找一些关于最佳结构的CSS大师建议。我正在水平'列表'上实现精灵而不是图标。当前的HTML就像：

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

但要做到这一点，我给标签内联块和宽度。我从来不喜欢内联块，看起来很笨重。

有更好的选择吗？（嵌套span，div包装器？）

Answer 1

@karishma：inline-block是一个不错的选择，但如果不想这样，你可以使用下面的CSS。

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 ;
}

在背景中使用图标图像是好的，因为1）它可以节省标记空间和放大倍数。 2）为了避免谷歌不想要的图像缓存，它有助于搜索引擎优化。

Answer 2

我通常喜欢这样：

<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;
}

Answer 3

我喜欢你的技巧@sandeep和@hatake-kakashi。一些可能的改进（虽然可能超出了问题的范围）。尝试构建您的列表和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>

这样，级联适用于您，此列表中的所有链接都可以获得没有多余类名的精灵样式。然后让你的父元素处理定位。至少，我认为这是正确的。对于语法和伪代码表示道歉，因为我写得有点快而又脏。

在锚标签上使用CSS Sprites

3 个答案: