Question

我需要为网站制作导航。它使用图像而不是文本。文字被隐藏了。当然，创建导航以在页面中导航。我创建了导航，但我无法点击它。我认为这是因为文本是“向左推”（隐藏在其他词中），但没有文字 - 没有链接 - 没有点击。知道怎么解决吗？

HTML：

<div id="navigation">
    <ol>
        <li class="home"><a href="home">Home</a></li>
        <li class="services"><a href="services">Services</a></li>
        <li class="gallery"><a href="gallery">Gallery</a></li>
        <li class="ourClients"><a href="our-clients">Our Clients</a></li>
        <li class="aboutUs"><a href="about-us">About Us</a></li>
        <li class="contactUs"><a href="contact-us">Contact Us</a></li>
    </ol>
</div>

CSS：

#navigation {
    background: url( "images/navigation.png" );
    height: 80px;
}

#navigation li {
    float: left;
    height: 30px;
    margin: 0 60px 0 0;
    text-indent: -9999px;
}

#navigation li.home {
    background: url( "images/navigation_home.png" );
    width: 54px;
}

#navigation li.services {
    background: url( "images/navigation_services.png" );
    width: 61px;
}

/* And so on like 'li.x'. */

Answer 1

传达信息的图像是内容，而不是演示或背景。使用<img>元素。

<li class="home"><a href="home"><img src="images/navigation_home.png" alt="Home"></a></li>

Answer 2

即使文本缩进，您也需要使a链接填充li，因此除了（隐藏）文本之外还有其他内容可以点击;）

#navigation li a {    
  display: block;
  height: 30px;
}

如何使用可点击的图像进行导航？

2 个答案: