无论文本长度如何，都将图像定位在最右边

Question

我希望将图像放在200px跨度的最右边。取而代之的是，它位于" Hello"文本的末尾，并且由于" Hello"比200px短，因此它不在200px跨度的最右边。

<span>Hello</span>
span {
   background-image: url("image.gif");
   background-position:right center; 
   background-repeat: no-repeat;
   min-width: 200px;
   width: 200px;
}

Answer 1

您无法在跨度上设置一个宽度 - 一个内联元素。

将其设置为 display: inline-block，并且可以工作。

Answer 2

从我所看到的，似乎没有理由将跨度保持在200px。在右侧添加一些与您的图像相同的填充物以及更多的填充呢？例如，如果您的image.gif宽16px，则执行：

padding-right:20px;

摆脱宽度和最小宽度。这样，您就不必解决显示屏和浏览器兼容性问题。

Answer 3

我会尝试使跨度显示=块，如果您的设计允许。

span  {
    display:block;
    background-image: url("image.gif");
    background-position:right center; 
    background-repeat: no-repeat;
    min-width: 200px;
    width: 200px;}

我认为您可能必须这样做才能获得一个跨度以尊重宽度。不幸的是，它将将下一行元素踢到下一行。