jquery - 内联列表元素，添加编号叠加

Question

我写了this thumbnails gallery几年前使用 jquery lightbox 插件。

<div class="p">
    <ul class="gallery">
        <li><a rel="lightbox-gallery" href="..."><img src="..."></a></li>
        <li>...</li>
    </ul>
</div>

div.p {
    text-align: justify;
}

.gallery li {
    display: inline;
    list-style-type: none;
}

也许它并不完美，但它在整个列宽度上均匀分布，并且在窗口大小调整时自适应。

现在照片将近 40 张，我想使用 jquery 添加一些带有照片编号的叠加层，如下所示:

但是我遇到了一些麻烦，因为元素是内联的而不是 block 。

是否可以在不改 rebase 本样式的情况下实现它？

Answer 1

position: absolute;会成功的。 <li>需要是position: relative .

演示:http://jsfiddle.net/ThinkingStiff/gH7vH/

HTML:

<ul>
    <li><a><img class="thumbnail" /></a><div class="number">1</div></li>
    <li><a><img class="thumbnail" /></a><div class="number">2</div></li>
</ul>

CSS:

.thumbnail
{
    border: 1px solid black; 
    display: inline-block;   
    height: 60px;
    width: 60px;
    vertical-align: top;
}
li
{
    display: inline-block;
    position: relative;
}
.number
{
    background-color: rgba( 47, 47, 47, .3);
    bottom: 0;
    height: 18px;
    line-height: 18px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 18px;
    z-index: 1;
}