把文字圖片下方的列表（使用jQuery燈箱）

Question

現在我已經得到了與jQuery的燈箱插件使用圖像的大名單，只是格式，如：

<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> 

但是現在我只是得到顯示在圖像右側的標題。我想不出去做這件事的最佳方式。任何幫助將非常感激。

Answer 1

除了標題圖像後的<br>之外，使用display: inline-block代替<li>元素，而不僅僅是display: inline。

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

Answer 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; 

}