css - HTML:带有背景颜色和图像的跨度——为什么颜色没有出现在图像下方？

Question

我正在尝试在跨度内的文本旁边添加箭头图像。这是我正在使用的 HTML:

<span id="status" class='unreviewed'>
  Unreviewed 
  <img src="bullet_arrow_down.png" />
</span>

现在，我用这个 css 为 span 的背景着色:

#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;
}

现在，这会显示所有正确排列的内容，但背景颜色不会超出“未审阅”一词的末尾。该图像尽管是透明的 png，但后面是白色的，而不是#DA704B。

Firefox 和 Safari 都是这种情况。任何帮助将不胜感激!

Answer 1

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;
}