css填充列表项内的图像（导航栏）答案

【问题标题】：css padding an image inside a listitem (navigation bar)css填充列表项内的图像（导航栏）
【发布时间】：2013-04-28 20:28:52
【问题描述】：

我的导航栏上的每个列表项都显示了一个图像，问题是我不能使用 10px 的填充，我的浏览器会认为列表项需要左边的填充而不是我的背景图像。

有没有办法可以从 #menu li a 选择器中减去 background-image 属性，不影响我页面上的其他背景图像属性？

#menu li a{
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;

    color:#ffffff;

    text-decoration:none;

    background-color: #376596;

    padding-top:2px;
    padding-left: 20px;
    padding-bottom: 2px; 

    background-image:url('http://images.subeta.net/smilies/6398_emoticon_smile.gif');
    background-repeat:no-repeat;
}

你可以看我的完整代码here

我一直在网上寻找解决方案，但我的英语不足以搜索我的问题，因为我不知道我应该问的单词/术语我还是个菜鸟。

【问题讨论】：

标签： css image properties background padding

【解决方案1】：

只需尝试背景位置。

menu li a{
background-position:10px 0px;
}

【讨论】：

感谢它的工作，但它搞乱了我的菜单 li a: hover{ background :(
我把它修好了，只需要把 background-position:0px 0px;在我的悬停选择器中甜蜜！
我现在投票的声誉很低，但当它变得更高时我会这样做。

【解决方案2】：

您不能在背景图像上使用填充。你可以像这样定位图像：

background-image:url('http://images.subeta.net/smilies/6398_emoticon_smile.gif') no-repeat 5px 0px;

它现在将从左侧定位 5px，从顶部定位 0。哦，删除background-repeat:no-repeat

【讨论】：