Navigation 想要将我的导航栏链接设置为其容器的100%宽度，但通过这样做，我的精灵图像的宽度变为100%

我在页面顶部有一个固定的水平导航栏。我正在进行响应性设计，因此导航栏的宽度为100%，每个列表项的宽度为总导航栏宽度的25%（共有四个）。 我有一个图标在每个列表栏的中间栏，我有我的超链接设置为显示块和宽度为100%的列表项目，他们包含在其中，您可以点击任何地方的每一个导航项，它将前往所需的网页。 我想把我的图标放在一个精灵上，这样http请求就少了，因为现在我把它们作为单独的图像，你可以从下面我的html headernav代码的最后3个列表项中看到：

<div id="header">
    <ul id="headernav">  
                <li><a id="home" href="#"></a></li>  
                <li><a class="gradient_black" href="locate8.htm#"><img class="headericons" src="images/maps_30_white1.png" height="30" width="30" alt="Find Us" /></a></li>  
                <li><a class="gradient_black" href="#"><img class="headericons" src="images/phone_white.png" height="30" width="30" alt="Click to Call" /></a></li>  
                <li><a class="gradient_black" href="more5.htm#"><img class="headericons" src="images/arrow_white.png" height="30" width="30" alt="More" /></a></li>  
        </ul>  
</div>

---

我已经解决了这个问题。我在锚定标记内放置了一个span标记（id=“home”），并添加了display:block；我的家庭身份证在css。如果span标记中没有添加“display:block”，图像将不会显示在渐变顶部。这是我的html

<div id="header">
        <ul id="headernav">  
                    <li><a class="gradient_black" href="#"><span id="home"></span></a></li>  
                    <li><a class="gradient_black" href="#"><img class="headericons" src="images/maps_30_white1.png" height="30" width="30" alt="Find Us" /></a></li>  
                    <li><a class="gradient_black" href="#"><img class="headericons" src="images/phone_white.png" height="30" width="30" alt="Click to Call" /></a></li>  
                    <li><a class="gradient_black" href="#"><img class="headericons" src="images/arrow_white.png" height="30" width="30" alt="More" /></a></li>  
            </ul>  
    </div>

---

我已经解决了这个问题。我在锚定标记内放置了一个span标记（id=“home”），并添加了display:block；我的家庭身份证在css。如果span标记中没有添加“display:block”，图像将不会显示在渐变顶部。这是我的html

<div id="header">
        <ul id="headernav">  
                    <li><a class="gradient_black" href="#"><span id="home"></span></a></li>  
                    <li><a class="gradient_black" href="#"><img class="headericons" src="images/maps_30_white1.png" height="30" width="30" alt="Find Us" /></a></li>  
                    <li><a class="gradient_black" href="#"><img class="headericons" src="images/phone_white.png" height="30" width="30" alt="Click to Call" /></a></li>  
                    <li><a class="gradient_black" href="#"><img class="headericons" src="images/arrow_white.png" height="30" width="30" alt="More" /></a></li>  
            </ul>  
    </div>

#headernav a{
color: #fff;  
display: block;  /*displays the link as a block which stretches to the width specified-100% of its parent*/
width: 100%;/*width of link is 100% the width of its parent*/
text-align: center;  /*puts the text of the link in the centre of the display block*/
padding-bottom: 20px;
padding-top: 10px;
height: 60px;
}  



#home{
width:46px; 
margin: auto;
background: url('images/img_navsprites.gif') 0 0 no-repeat;
display: block;
height: 60px;
}