html - CSS:背景图像和填充

Question

我想在列表项的右侧添加一个背景图像，并希望右侧也有一些填充，但我做不到。请看下面的例子:

HTML:

<ul>
    <li>Hello</li>
    <li>Hello world</li>
</ul>

CSS:

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

我知道我们可以按像素设置图像位置，但由于每个 li 的宽度不同，我不能那样做。

这是 JSFiddle 链接: http://jsfiddle.net/QeGAd/1/

Answer 1

您可以使用 CSS background-origin 更加精确:

background-origin: content-box;

这将使图像尊重框的填充。