CSS:背景图片和填充 [英] CSS: Background image and padding

问题描述

我想在列表项的右侧添加背景图像，并且也希望从右侧添加一些填充，但是我无法做到这一点.请看下面的例子:

I want to add a background image on the right side of the list items, and want to have some padding from the right side as well, but I'm unable to do that. Please have a look at following example:

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的宽度不同，所以我不能这样做.

I know we can set the image position by pixels, but since each of the li has different width, I can't do that.

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

Here's JSFiddle link: http://jsfiddle.net/QeGAd/1/

推荐答案

您可以使用百分比值:

background: yellow url("arrow1.gif") no-repeat 95% 50%;

像素不完美，但是...

Not pixel perfect, but…

这篇关于CSS:背景图片和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！