1

我在这样的网页上显示一组带有链接的缩略图

在此处输入图像描述

这是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/

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

谢谢

4

3 回答 3

2

它也有效：

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

width是你的图像的宽度。

于 2012-09-28T07:29:41.023 回答
0

您可以制作<img>或制作<span>display:block

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

于 2012-09-28T07:24:29.917 回答
0

要解决您的问题，只需在 img 和 span 标签之间添加一个 br 标签。

于 2012-09-28T07:36:27.240 回答