使用 span 在 H1 标签的文本旁边放置一个图标

Question

这是我尝试使用的 HTML：

<h1>Order Not Paid<span class="not-paid"></span></h1>

当然，如果有更好的方法请说出来。

目前由于跨度内没有文本，浏览器似乎忽略了这个标签。 Firebug 在检查时显示为灰色。

当我在 span 中放置文本时，图标会正确显示。

我可以为这个效果应用什么 CSS 规则？到目前为止，这是我所拥有的（它是 SASS，但很容易掌握）：

h1 {
    font-size: 24px;

    span.not-paid {
        background-image: url('/Public/images/remove.png');
        background-repeat: no-repeat;
    }
}

我希望图标出现在跨度所在的位置。

或者，做这样的事情是否符合犹太教规？如果是这样，我可以解决这个问题，因为它在 IE8 和现代浏览器上看起来不错。

<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>

Answer 1

如果图标很小并且没有在其他任何地方重复使用，只需将其设置为 h1 的一部分。

HTML：

<h1 class="not-paid">Order Not Paid</h1>

CSS：

h1.not-paid {
  font-size: 24px;
  padding:0 16px 0 0; /* whatever the dimensions the image needs */
  background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}

这样更干净一点。

Answer 2

背景图像没有显示，因为跨度没有宽度，因此没有显示任何背景。

另外，您提供的 sn-p 不是有效的 css。

尝试这样的事情，假设图像是 16 像素 x 16 像素：

h1 {
  font-size: 24px;
}

span.not-paid {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}

display: inline-block; 是为了使它适用于宽度。 vertical-align 是将图像居中放置在行的中间。

综上所述，<img> 标签解决方案也可以工作，但它不能很好地扩展到很多类似的图像。基于 css 的解决方案使以后更容易切换到 css spriting 之类的东西。

在任何一种情况下，您都可能希望将直接图像 url 更改为相对 url，然后才能期望此页面在生产环境中工作。

Answer 3

我很确定你需要给跨度一些width。默认情况下它没有，所以当然不会看到背景图像。

Answer 4

首先，如果你没有使用 sass 和 less，你的样式表是错误的。接下来，将inner-block 指定为 span 以及图像的高度和宽度。

h1 {
    font- size: 24px;
}

h1 span.not-paid {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}