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

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

从我所见，似乎没有理由将跨度保持在 200 像素。如何在右侧添加一些与图像大小相同的填充，再加一点？例如，如果您的 image.gif 为 16px 宽，则执行以下操作：

padding-right:20px;

并摆脱宽度和最小宽度。这样您就不必担心显示和浏览器兼容性问题。

Answer 3

如果您的设计允许，我会尝试制作 span display = block。

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

我认为您可能必须这样做才能让 SPAN 尊重宽度。不幸的是，它会将下一组元素踢到下一行。