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

您无法在span-an inline元素上设置宽度。

将其设置为display: inline-block，它会起作用。

Answer 2

从我所看到的，似乎没有理由将跨度保持在200px。如何在右侧添加一些与图像大小相同的填充，再多一点？例如，如果您的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尊重宽度。不幸的是，它会将下一组元素打到下一行。

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

3 个答案: