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

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/

我了解了CSS函数calc()及其真棒.我尝试使用它像:

#abc{width:calc(100%-20px)}

但是这个功能的问题在于它不起作用.我测试了这个代码IE9和Safari,它没有用.

为什么不起作用？

我已经在最新版本的Firefox,Chrome,IE 11中对它进行了测试.在这些浏览器中,当您使用CSS calc()函数计算时,它都不起作用width.据我所知,我已正确应用它.作为参考,您可能想要检查

http://www.sitepoint.com/css3-calc-function/

为什么这不起作用？

div {
  background-color: blue;
  height: 50px;
  width: calc(100%-250px);
}

<div></div>

演示:

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

编辑:

是的,这个问题在许多编辑过程中发展成为重复,但我仍然认为这应该保留在这里,因为它比例如CSS calc()不能正常工作更好地说明问题.此外,imho的答案要好得多.