Question

我有以下代码

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

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

    <%} %>

</ul>

以下是精灵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标签上部分显示的精灵的第一张图片无法找出问题。我从Here创建了css 小提琴链接是 http://jsfiddle.net/tassadaque/LnGqX/1/

Answer 1

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

中定义了背景位置

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

从您的top left图片网址中移除li位置，然后按以下方式写一下：

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

Answer 2

首先，运行：

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

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

    <%} %>

</ul>

看看你是否得到top-pkg1，top-pkg2等。在我看来，你所有的李都有同一个班级。

<ul>精灵问题</ul>

2 个答案: