什么html标签最好与精灵一起使用

时间:2010-10-16 15:45:26

标签: css css-sprites

我想用精灵来显示我的图标。我创建了图像和CSS,现在我需要将类添加到我的html元素中。什么是最好的HTML元素?

<div>工作正常,但当然它横跨整个空间并包裹。只有当我把东西放进去时才有用。这是我的CSS

.sprite {
    background:url('/i/sprites.png');
    background-repeat:no-repeat
}
.ico2{
    background-position:0 -104px;
    width:16px;
    height:16px
}

3 个答案:

答案 0 :(得分:4)

我的意见是无所谓。无论哪种标签都适合您的其他内容。

  • <ul><li></li></ul>结构非常灵活,可以进行布局。
  • <div><span>当然。
  • 我经常发现自己在链接中使用精灵作为按钮。

您可能希望对放置精灵的大多数元素使用display: blockdisplay: inline-block,并记住您可以为所有元素设置该元素。

答案 1 :(得分:1)

这取决于背景。尝试选择最能代表数据语义的元素,而不是它将如何显示;这就是CSS的用途。

您是否正在显示列表图标?使用<ul>并将精灵放在<li>元素中。

答案 2 :(得分:0)

您可以使用<span>代码并将其显示设置为inline-block,并定义高度和宽度。