使用文本缩进进行图像导航
我正在尝试为我的网站创建一个简单的图像导航，使用 CSS 声明列表项 (li) 的 background-image 属性。 问题是，当我使用 text-indent 将图像移出屏幕时，链接不再存在（我想也离开了屏幕）。 任何帮助将不胜感激。 这是我的 XHTML：
<div id="nav">
<ul>
<li class="current about">
<a href="#about" title="about">about</a>
</li>
<li class="contact">
<a href="#contact" title="contact">contact</a>
</li>
<li class="networks">
<a href="#networks" title="networks">networks</a>
</li>
</ul>
</div>
这是我的 CSS：
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
我还为各个列表项设置了背景位置，因为我正在使用 图像精灵。 提前致谢！
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
<a href="#about" title="about">about</a>
</li>
<li class="contact">
<a href="#contact" title="contact">contact</a>
</li>
<li class="networks">
<a href="#networks" title="networks">networks</a>
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
将该样式应用于
#nav li a。 否则，li内的所有内容（包括链接）都会移出屏幕。Apply that style to the
#nav li a. Otherwise everything inside theli, including the link, is shifted off screen.