1

現在、jQuery Lightboxプラグインで使用する画像の大規模なリストがあり、次のように単純にフォーマットされています。

<div id="gallery"><ul>
    <li><a href="photos/1.jpg"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a></li>
    <li><a href="photos/2.jpg"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a></li>
    <li><a href="photos/3.jpg"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a></li>
    <li><a href="photos/4.jpg"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a></li>
    <li><a href="photos/5.jpg"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a></li>
</ul></div>

CSS：

#gallery {
    background-color: #efefef;
    border:1px solid #ccc;
    background-size: 100%;
    width: 90%;
    margin-top:20px;
}

#gallery ul { list-style: none; }
#gallery ul li { 
    display: inline; margin-left: 5px; margin-right: 5px; 
    font-size:.4em;

}
#gallery ul img {
    border: 5px solid #3e3e3e;
    border-width: 2px 2px 2px;
}
#gallery ul a:hover img {
    border: 5px solid #fff;
    border-width: 2px 2px 2px;
    border-color: #8f8f8f;
    color: #fff;
}
#gallery ul a:hover { color: #fff; }

そして、私がやろうとしているのは、各画像の下にキャプションテキストが配置されるようにすることです。元：

<li><a href="photos/1.jpg">
        <img src="photos/1_t.jpg" width="72" height="72" alt="" /></a>
        Image 1
    </li>

しかし、今は画像の右側にキャプションが表示されています。私はこれを行うための最善の方法を考えることができません。どんな助けでも大歓迎です。

4

2 に答える 2

2

試す;

HTML：

<li><a href="photos/1.jpg"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a><p>Image 1</p></li>

CSS：

#gallery ul li { 
   float:left; margin-left: 5px; margin-right: 5px; 
   font-size:.4em;

}
于 2013-02-18T01:58:40.947 に答える
1

<br>キャプションのアフター画像に加えて、要素だけでなくdisplay: inline-block、要素にも使用します。<li>display: inline

http://jsfiddle.net/nfEMs/1/

于 2013-02-18T01:54:39.403 に答える