html - 具有 4 个链接的 CSS 图像 Sprite

Question

Can someone check if this portion of the CSS is correct?

CSS

#nav-list {
    list-style-type: none;
    background-repeat: no-repeat;
    background-image:url("../_img/Footersprite.png") 
}

#nav-list li, #nav-footer a {
    height: 40px;
    display: block;
}

#nav-list li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#nav-list-why-repair-01 { width: 98px; }
#nav-list-savings-02 { width: 131px; }
#nav-list-enviromental-03 { width: 123px; }
#nav-advantage-04 { width: 138px; }

#nav-list-why-repair-01 a:hover { background:url(./_img/Footersprite.png) 0px -40px no-repeat; }
#nav-list-savings-02 a:hover { background:url(./_img/Footersprite.png) -98px -40px no-repeat; }
#nav-list-enviromental-03 a:hover { background:url(./_img/Footersprite.png) -229px -40px no-repeat; }
#nav-list-advantage-04 a:hover { background:url(./_img/Footersprite.png) -352px -40px no-repeat; }

HTML

<ul id="nav-footer"
<a class="whyroofrepair" href="/why-roof-repair.html">Why Roof Repair?</a>
<a class="Savings" href="/savings.html">Savings</a>
<a class="EnvironmentalBenefits" href="/environmental-benefits.html">Environmental Benefits</a>
<a class="RoofRxAdvantage" href="/roof-rx-advantage.html">Roof Rx Advantage</a>
</ul>

I need help with the HTML. can anyone advise on how to rewrite this correctly with out having to change the CSS provided it correct?

Answer 1

我不确定您希望链接看起来像什么，但是要将 HTML 与您提供的 CSS 相匹配，您可以制作 HTML 像这样:

<ul id="nav-list">
    <li><a class="whyroofrepair" href="/why-roof-repair.html">Why Roof Repair?</a></li>
    <li><a class="Savings" href="/savings.html">Savings</a></li>
    <li><a class="EnvironmentalBenefits" href="/environmental-benefits.html">Environmental Benefits</a></li>
    <li><a class="RoofRxAdvantage" href="/roof-rx-advantage.html">Roof Rx Advantage</a></li>
</ul>

但即便如此，如果您希望链接中的文本可见，您可能希望从 CSS 中删除 text-indent: -9999em;。