显示图像下的链接

Question

我在这样的网页上显示一组包含链接的缩略图图像

这是HTML

<div id="newsletters-and-journals">
    <p id="pubs-caption">Publications</p>
    <ul>
        <li class="pubs">
            <img class="pub-cover" src="images/CXuyv.png" />
            <span><a href="#">Journal - January 2012</a></span>
        </li>
        <li class="pubs">
            <img class="pub-cover" src="images/vER9H.png" />
            <span><a href="#">Newsletter - May 2012</a></span>
        </li>
    </ul>
</div>​

和CSS

#newsletters-and-journals ul { position:relative; top:12px; left:30px; }
.pubs { display:inline; margin-right:60px; }
.pub-cover { width:120px; height:140px; }​

也是一个小提琴http://jsfiddle.net/nK0de/3jeVF/2/

如何在下显示每个相应图片的链接？

谢谢

Answer 1

它也有效：

.pubs {
  display: inline-block;
  margin-right: 60px;
  width: 120px;
}

width是你图片的宽度。

Answer 2

您可以将<img>或<span>设为display:block

http://jsfiddle.net/3jeVF/6/

Answer 3

解决你的问题只需添加一个 BR 之间的标签      img和span标签。