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

发布于 2024-09-27 22:17:58 字数 345 浏览 7 评论 0原文

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

工作正常,但当然它会跨越整个空间并进行环绕。仅当我在其中放入一些东西时才起作用。这是我的 CSS

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

I would like to use sprites to display my icons. I created image and CSS, now I need to add class to my html element. What is the best HTML element for that?

<div> works fine, but of course it spans across entire space and wraps. works only if I put something in it. Here's my CSS

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

半寸时光 2024-10-04 22:17:58

我的意见是,这并不重要。无论标签适合您的其余内容。

    结构的布局非常灵活。

  • 当然是
  • 我经常发现自己在链接中使用精灵作为按钮。

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

My opinion is that it doesn't matter. Whatever tags are suitable for the rest of your content.

  • <ul><li></li></ul> structures are very flexible for layout.
  • <div> and <span>of course.
  • I often find myself using sprites for buttons in links.

You'll probably want to use display: block or display: inline-block for most of the elements where you put your sprites, and remember that you can set that for all elements.

愛放△進行李 2024-10-04 22:17:58

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

您是否正在显示图标列表?使用

    并将精灵放入其

  • 元素中。

It depends on context. Try to choose the element which best represents the semantics of the data, not on how it will be displayed; that's what CSS is for.

Are you displaying a list of icons? Use a <ul> and put your sprites in its <li> elements.

输什么也不输骨气 2024-10-04 22:17:58

您可以使用 标签并将其显示设置为具有定义的高度和宽度的 inline-block

You could use <span> tags and set it's display to inline-block with defined height and width.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文