修改文本填充而不是菜单上的图像填充

Question

我有一个精灵菜单，想要修复填充，如果我添加填充文本被移动但是图像...

#categories{width:1042px;height:170px;margin:15px 0px 0px 0px;}
#categorieMenu{background:url(http://hmimexico.com/categories.jpg) no-repeat;width:1042px;height:170px;margin:0;padding:0;background-size:100% 200%;}
#categorieMenu li,#categorieMenu a{height:170px;display:block;color:#000000; text-decoration:none;}
#categorieMenu li{ 
    float:left;   
    list-style:none;    
    display:inline; 
    text-indent:5px;        
    line-height:95%;    
    font-size: 25px;    
    color: #000;
    font: normal 25px "DroidSansBold", Calibri, sans-serif;
    /*how to add correct pad to adjust text as wanted image?*/
    }
#categorie_1{width:174px;}
#categorie_2{width:175px;}
#categorie_3{width:174px;}
#categorie_4{width:175px;}
#categorie_5{width:174px;}
#categorie_6{width:170px;}
#categorie_1 a:hover{background:url(http://hmimexico.com/categories.jpg) 0px -170px no-repeat;}
#categorie_2 a:hover{background:url(http://hmimexico.com/categories.jpg) -174px -170px no-repeat;}
#categorie_3 a:hover{background:url(http://hmimexico.com/categories.jpg) -349px -170px no-repeat;}
#categorie_4 a:hover{background:url(http://hmimexico.com/categories.jpg) -523px -170px no-repeat;}
#categorie_5 a:hover{background:url(http://hmimexico.com/categories.jpg) -698px -170px no-repeat;}
#categorie_6 a:hover{background:url(http://hmimexico.com/categories.jpg) -872px -170px no-repeat;}

我希望得到像：

Here is the fiddle

Answer 1

如果您要求仅填充列表项标签中包含的文本，您可以像这样选择它们：

#categorieMenu a {
    padding: 5px 5px 5px 5px;
}

您可以根据需要调整填充，而不会影响图像的填充。

Answer 2

在li的

里面的锚点中移动填充

#categorieMenu a{
    padding: 20px;  

}