在这种情况下
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB}
我想在背景图片右侧显示20px空格，但我无法在li上提供边距，因为border应触及边缘。
所以我需要设置20px但是左侧需要20px而不是右侧。
li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
border-bottom: 1px solid #D4E8EB}
答案 0 :(得分：82)
在你的css提到位置然后“间距值（50px）”然后其他位置（中心/顶部）
li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}
较旧的浏览器和IE8以及旧版本的IE不支持此代码。最新更新的浏览器与此方法没有冲突，希望未来的更新也支持它。
如果您使用的是现代浏览器，请按照其他答案中的建议尝试background-position: calc(100% - 50px) center;。 calc还有很长的路要走，因为它在逻辑上和数学上都能够产生更准确的结果。
答案 1 :(得分：41)
您可以使用CSS3“calc”函数：
示例：
background-position: calc(100% - 10px) center;
答案 2 :(得分：9)
只需在图形编辑器的右侧添加20px空白区域即可。
答案 3 :(得分：1)
您可以在li标签内使用其他对象，并为其提供带右边距的背景图片：
li #image {
margin-right: 20px;
background: url(pp.jpg) no-repeat right center;
}
li {
border: 1px solid #D4E8EB;
}
答案 4 :(得分：1)
使用以下代码将20px添加到background-image的右侧 -
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}
使用以下代码将20px添加到background-image的左侧 -
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}
答案 5 :(得分：0)
不幸的是，“简单”解决方案是编辑您的图像并在透明空间的右下方添加20px。
你可以用背景剪辑/背景原点实现它，但这需要一点点玩......
答案 6 :(得分：0)
border-right: 20px solid transparent;
答案 7 :(得分：-1)
在<li>中放置一个范围标记，并为其添加边距，这样<li>仍然应该与边框一起延伸到边缘。
答案 8 :(得分：-1)
您可以从左侧指定百分比，
background-position: 97% 50%;
这不是px的精确px，而是来自右边的3％