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

这样的事情应该有效。相应调整。

#navigation a {
    display: inline-block;  //or block
    width: 308px;      //adjust accordingly
    height: 80px;      //adjust accordingly
}

Answer 2

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;
}

文本缩进是从页面移动元素（锚标记）

2 个答案: