Html 使用跨度在 H1 标签的文本旁边放置一个图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10050352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing an icon beside the text of an H1 tag by using a span
提问by Only Bolivian Here
Here's the HTML I'm trying to use:
这是我尝试使用的 HTML：
<h1>Order Not Paid<span class="not-paid"></span></h1>
Of course if there is a better way please say so.
当然，如果有更好的方法请说出来。
Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.
目前由于跨度内没有文本，浏览器似乎忽略了这个标签。检查时，Firebug 显示为灰色。
When I place text in the span, the icon shows correctly.
当我在跨度中放置文本时，图标显示正确。
What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):
我可以为这种效果应用什么 CSS 规则？这是我到目前为止所拥有的（它是 SASS，但很容易掌握）：
h1 {
font-size: 24px;
span.not-paid {
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
}
I'd like the icon to appear where the span is.
我希望图标出现在跨度所在的位置。
Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.
或者，做这样的事情是犹太洁食吗？如果是这样，我可以解决这个问题，因为它在 IE8 和现代浏览器上看起来不错。
<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>
回答by Alex
If the icon is small and not reused anywhere else just set it as part of the h1.
如果图标很小并且没有在其他任何地方重复使用，只需将其设置为 h1.
HTML:
HTML：
<h1 class="not-paid">Order Not Paid</h1>
CSS:
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 */
}
A little cleaner this way.
这样清洁一点。
回答by bloy
the background image is not showing up because the span has no width, and therefore is not showing any of the background.
背景图像没有显示，因为跨度没有宽度，因此没有显示任何背景。
also, the snippet you gave is not valid css.
此外，您提供的代码段不是有效的 css。
try something like this, assuming the image is 16px by 16px:
尝试这样的事情，假设图像是 16px x 16px：
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;
}
The display: inline-block;is to make it so the width will apply. The vertical-alignis to center the image on the middle of the line.
这display: inline-block;是为了使它适用宽度。该vertical-align是到中心上线的中间图像。
All of that said, the <img>tag solution would work too, but it doesn't scale well to a lot of similar images. The css-based solution makes it easier to switch to something like css spriting later.
综上所述，<img>标签解决方案也可以工作，但它不能很好地扩展到许多类似的图像。基于 css 的解决方案使以后更容易切换到类似 css spriting 的东西。
In either case, you'll probably want to change your direct image urls to relative urls before expecting this page to work in a production environment.
在任何一种情况下，您都可能希望在希望此页面在生产环境中工作之前将直接图像 url 更改为相对 url。
回答by Starx
First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-blockto span and the image height and width.
首先，如果您没有使用 sass 和 less，那么您的样式表是错误的。接下来，给inner-blockspan 和图像的高度和宽度。
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;
}
回答by Griffin
I'm pretty sure that you need to give the span some width. By default it has none, so of course no background image will be seen.
我很确定你需要给 span 一些width. 默认情况下它没有，所以当然不会看到背景图像。
