0

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

#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;}

我想得到类似的东西： 在此处输入图像描述

这是小提琴

4

2 回答 2

2

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

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

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

于 2013-07-09T20:29:05.707 回答
1

移动 li's 内锚点中的填充

#categorieMenu a{
    padding: 20px;  

}
于 2013-07-09T20:28:25.043 回答