Question

如何在导航中的文本上方添加图像。它应该显示在文本上方。

我的HTML

<ul class="nav">
  <li class="whoweare"><a href="#">who we are</a></li>
  <li class="services"><a href="#">services</a></li>
  <li class="contact"><a href="#">contact</a></li>
</ul>

我的CSS

ul.nav {
  list-style: none; 
  border-top: 20px solid #FFF; 
}

ul.nav li {
  float: left;
  text-align:center;
  width: 23%;
}

Answer 1

请参阅此小提琴http://jsfiddle.net/pixelass/YxkPz/

如果您需要图片可点击，只需将其放在<a>标记

中

请在此处查看：http://jsfiddle.net/pixelass/YxkPz/1/

图片需要display:block;

<强> HTML

<ul class="nav">
  <li class="whoweare"><img src="http://lorempixel.com/150/50/sports/9/"><a href="#">who we are</a></li>
  <li class="services"><img src="http://lorempixel.com/150/50/sports/4/"><a href="#">services</a></li>
  <li class="contact"><img src="http://lorempixel.com/150/50/sports/1/"><a href="#">contact</a></li>
</ul>

<强> CSS

ul.nav {
  list-style: none; 
  border-top: 20px solid #FFF; 
}

ul.nav li {
  float: left;
  text-align:center;
  width: 23%;

}
ul.nav li img{
  display:block;
}

Answer 2

你也可以使用background-image添加图片链接：url（'paper.gif'）; nad设置文本缩进：-9999px;

.whoweare{
      background-image:url('image_path');
      text-indent:-9999px;
     }
 .services{
       background-image:url('image_path');
      text-indent:-9999px;
     }
 .contact{
      background-image:url('image_path');
      text-indent:-9999px;
     }

在我的导航中添加每个li上方的图像

2 个答案: