1

我的页面顶部有一个固定的水平导航栏。我正在做响应式设计，所以导航栏的宽度是 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>

上面的第一个列表项使用我在下面的 css 中定义的 id 'home'。问题是，由于我的超链接的宽度为 100%，因此精灵宽度变为 100%，并且显示了完整的精灵图像，而不仅仅是（在这种情况下）房屋图像。如何在渐变顶部（我将其作为每个链接的背景）分层精灵，同时将精灵的宽度保持为例如 46px，但也将链接的宽度保持为链接项目的 100%？谢谢你的帮助。这是我的CSS

#header {
width: 100%;
position:fixed;
 /*height of the header navigation 60 and border 2px*/
overflow-y: hidden;
z-index: 2;
}

#headernav {  
 width: 100%;  
    background: #000;
    font-size: 1.5em;  
position: relative;  
}  
.border{

border-bottom: 2px solid #868783;  

}
#headernav li {  
    display: inline;  
    float: left;  
width: 25%;
 border-right: 1px solid #fff;
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
border-bottom: 1px solid #868783;  
height: 60px;

} 
#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{left: 100px; width:46px; margin: auto;}
#home{
background: url('images/img_navsprites.gif') 0 0 no-repeat, -moz-linear-gradient(top, #a9acad 14%, #050303 100%); /* FF3.6+ */
background: url('images/img_navsprites.gif') 0 0 no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(14%,#a9acad), color-stop(100%,#050303)); /* Chrome,Safari4+ */
background: url('images/img_navsprites.gif') 0 0 no-repeat, -webkit-linear-gradient(top, #a9acad 14%,#050303 100%); /* Chrome10+,Safari5.1+ */
background: url('images/img_navsprites.gif') 0 0 no-repeat, -o-linear-gradient(top, #a9acad 14%,#050303 100%); /* Opera 11.10+ */
background: url('images/img_navsprites.gif') 0 0 no-repeat, -ms-linear-gradient(top, #a9acad 14%,#050303 100%); /* IE10+ */
background: url('images/img_navsprites.gif') 0 0 no-repeat, linear-gradient(to bottom, #a9acad 14%,#050303 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9acad', endColorstr='#050303',GradientType=0 ); /* IE6-9 */

height: 60px;


}

http://m.sarahsfreeringtones.com/images/img_navsprites.gif

4

1 回答 1

1

我已经解决了这个问题。我在锚标签内放了一个跨度标签（id="home"）并添加了 display:block; 到我在css中的家庭ID。如果没有将 'display:block' 添加到 span 标签，图像将不会显示在渐变顶部。这是我的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>

和我编辑的 CSS

#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;
}
于 2013-09-11T19:54:22.817 回答