html - 在我的导航中的每个 li 上面添加一个图像

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

请参阅此 fiddle 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;
}