html - CSS 字幕问题

Question

我的字幕有问题。
当我将鼠标悬停在每张照片上时，如何让标题出现在每张照片下方。

问题是它们都出现在左下角的一侧。

这是HTML代码：

<div id="content2">
<ul style="width: 5020px; height: 600px;">  
<li class="image" style="width: 392px;"><img src="images/pr1x.jpg" ><p class="caption">1st    caption</p></li>
<li class="image" style="width: 392px;"><img src="images/pr2x.jpg" ><p class="caption">2st    caption</p></li>
</ul></div>

这是CSS代码：

li.image p.caption {
position:absolute;
display: none;
font-size: 28px;
color: red;
}
li.image:hover p.caption {
display: list-item;
}​
#content2{
width: 150%;
height: 600px;
float:left;
overflow:hidden;
}
#content2 p{
width: 150%;
}
.scrollbar-hor{
background-color: #e5e2de;
height: 24px;
width: 150%;
float:left;             
}
.handle-hor{
height: 25px;
width: 400px;
background: url(http://brafitting.info/images/bar.jpg) no-repeat;
}

Answer 1

我会尝试新的 HTML5 元素figure和figcaption
http://html5doctor.com/the-figure-figcaption-elements/

HTML

<ul>
    <li>
        <figure>
            <img src="http://lorempixel.com/100/200">
            <figcaption>Caption</figcaption>
        </figure>
    </li> 
    <li>
        <figure>
            <img src="http://lorempixel.com/100/200">
            <figcaption>Caption</figcaption>
        </figure>
    </li>
</ul>

CSS

figcaption  {  display: none;}
figure:hover figcaption {display: block;}
li {display:inline-block;border: 1px solid green;}
figure {border: 1px solid gold; margin:0;}
ul { margin: 0; padding:0; 1px solid blue;}
li { margin:0; padding:0;vertical-align: top;}

http://jsfiddle.net/5Pcxv/10/