HTML：带有背景颜色和图像的跨度 - 为什么颜色没有出现在图像下方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/876268/
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
HTML: span with a background color and image -- why doesn't the color appear under the image?
提问by Tim Sullivan
I'm trying to add an arrow image beside the text within a span. Here's the HTML I'm working with:
我正在尝试在跨度内的文本旁边添加一个箭头图像。这是我正在使用的 HTML：
<span id="status" class='unreviewed'>
Unreviewed
<img src="bullet_arrow_down.png" />
</span>
Now, I've coloured the background of the span with this css:
现在，我用这个 css 为跨度的背景着色：
#status {
float: right;
position: relative;
cursor: pointer;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
color:#FFFFFF;
font-size: 1.8em;
top: 10px;
}
#status span.unreviewed {
padding: 3px 4px;
background:#DA704B none repeat scroll 0 0;
}
#status span.unreviewed img {
float: right;
}
Now, this displays everything correctly lined up, but the background colour doesn't extend past the end of the word "Unreviewed". The image, despite being a transparent png, is white behind, rather than #DA704B.
现在，这会显示正确排列的所有内容，但背景颜色不会超出“未审核”一词的末尾。该图像尽管是透明的 png，但背后是白色的，而不是 #DA704B。
This is the case with both Firefox and Safari. Any help would be appreciated!
Firefox 和 Safari 都是这种情况。任何帮助，将不胜感激！
回答by Ballsacian1
Spans need to have display: block; in order to work like that.
Span 需要有 display: block; 为了那样工作。
#status {
display: block;
float: right;
position: relative;
cursor: pointer;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
color:#FFFFFF;
font-size: 1.8em;
top: 10px;
}
回答by Jonathan Fingland
Well, What jumps out at me is:
好吧，让我想到的是：
#status span.unreviewed
would be the selector for span with class "unreviewed" that is a descendantof #status. The selector you are looking for is
将是具有类“ unreviewed ”的跨度选择器，它是#status的后代。您正在寻找的选择器是
#status.unreviewed
You might want to have a look at the w3c specifications for CSS2 to avoid selector problems like this. http://www.w3.org/TR/CSS2/selector.html
您可能需要查看 CSS2 的 w3c 规范以避免此类选择器问题。 http://www.w3.org/TR/CSS2/selector.html
Hope that helps.
希望有帮助。
edit: one other quick point, why not use background-colorinstead of backgroundas all you're doing is changing the background color?
编辑：另一个快速点，为什么不使用background-color而不是background像您所做的那样更改背景颜色？
回答by David says reinstate Monica
You might also find it worthwhile declaring:
您可能还会发现值得声明：
#status span.unreviewed img {
background-color: transparent;
}
that should at least remove the white default image background.
这至少应该删除白色的默认图像背景。
回答by Luke Schafer
change:
改变：
#status span.unreviewed {
to span.unreviewed {
到 span.unreviewed {
that works for me in all browsers.
在所有浏览器中都适用于我。
If it still doesn't work, try making it block-level or use a div, as the colouring doesn't quite work as you'd expect on inline elements
如果它仍然不起作用，请尝试将其设置为块级或使用 div，因为着色并不像您对内联元素所期望的那样有效
