html - 文本缩进将元素( anchor 标记)移出页面

Question

我有一个列表，在导航中使用图片，没有任何文本。看来他们已经退居幕后，我很难修复它。我想成为点击图片并让他们把我带到另一个页面。我对此很陌生。我使用 CSS 来做到这一点。

<div id="navigation">
    <ol>
    <li class="news"><a href="news.html">news</a></li>
    <li class="review"><a href="review.html">Review</a></li>
    <li class="contact"><a href="contact.html">Contact</a></li>
    <li class="photos"><a href="photos.html">Photos</a></li>

    </ol>
</div>

这是我的 CSS:

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

#navigation li.news {
background: url( "news.png" );
display:block;
width: 308px;
height: 80px;
list-style:none;}

#navigation li.review {
background: url( "review.png" );
width: 308px;
height: 80px;
list-style:none;}

#navigation li.contact 
{
background: url( "contact.png" );
width: 308px;
height: 80px;
list-style:none;}

#navigation li.photos 
{
background: url( "photo.png" );
width: 308px;
height: 80px;
list-style:none;}

如有任何帮助，我们将不胜感激。

Answer 1

text-indent正在移动 <a>因为<a>而离开页面是display: inline默认情况下。在这种情况下，它被视为有点像文本并缩进。你可以这样做:

#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

虽然我完全不确定您为什么想要文本。

查看此演示:http://jsbin.com/ejeGufa/2/edit

你可以看出 <a>标签现在位于正确的位置，因为光标发生变化(或者您可以在开发工具中检查元素)。

顺便说一句，你可以通过这样做来避免重复代码:

#navigation li {
  list-style: none;
  float: left;
  margin: 0;
  display:block;
  width: 308px;
  height: 80px;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

#navigation li.news {
  background: red;
}

#navigation li.review {
  background: blue;
}