< ul>精灵问题 [英] <ul> Sprite Issue

问题描述

我有以下代码

<ul id ="menu">
    <%foreach (var pckg in Model)
    { %>

        <li style = "text-align:center;width:60px;" class = "top-<%=pckg.Controller.ToLower() %>"> 
            li-text
        </li>

    <%} %>

</ul>

然后是Sprite CSS

and following is the sprite CSS

.top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; } 
.top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; } 
.top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; } 
.top-pkg4{ background-position: -517px 0; width: 36px; height: 36px; } 
.top-pkg5{ background-position: -603px 0; width: 36px; height: 31px; } 
.top-pkg5{ background-position: -689px 0; width: 36px; height: 36px; } 
.top-pkg6{ background-position: -775px 0; width: 36px; height: 36px; } 
.top-pkg7{ background-position: -861px 0; width: 36px; height: 36px; } 

这是容器css

 #menu li
    {
         display:block;
         background: url(/Content/images/TopMenu/topmenu.png) no-repeat top left; 

    }    
    #menu li a
    {
        margin-top:35px;
        text-align:center;    
    }

但是当我运行这段代码时，我得到了所有li标签上部分显示的子画面的第一张图片无法弄清问题.我从此处创建了CSS 小提琴链接是 http://jsfiddle.net/tassadaque/LnGqX/1/

But when i ran this code i get the first image of the sprite partially shown on all li tags Couldn't figure out the problem. I created the css from Here Fiddle link is http://jsfiddle.net/tassadaque/LnGqX/1/

推荐答案

@tassadaque;您已经在li图片网址top left

@tassadaque; You already define background-position in your li image url top left

background: url(/Content/images/TopMenu/topmenu.png) no-repeat top left;

因此从您的li图片网址中删除top left位置，并这样写:

So remove top left position from your li image url and write like this:

background: url(/Content/images/TopMenu/topmenu.png) no-repeat;

修改 写:

#menu li {background: url(/Content/images/TopMenu/topmenu.png) no-repeat;}

#menu li.top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; }
#menu li.top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; }
#menu li.top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; }
#menu li.top-pkg4{ background-position: -20px 0; width: 36px; height: 36px; }
#menu li.top-pkg5{ background-position: -603px 0; width: 36px; height: 31px; }
#menu li.top-pkg5{ background-position: -689px 0; width: 36px; height: 36px; }
#menu li.top-pkg6{ background-position: -775px 0; width: 36px; height: 36px; }
#menu li.top-pkg7{ background-position: -861px 0; width: 36px; height: 36px; }

这篇关于< ul>精灵问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！