1

このようなWebページにリンク付きの一連のサムネイル画像を表示しています

ここに画像の説明を入力

ここに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 に答える