内联列表元素，添加编号覆盖

Question

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

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

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

现在pics已接近40，我想添加与jquery 一点点叠加照片编号，如下所示：

但我遇到了一些问题，因为元素是内联的而不是阻塞的。

是否有可能实现没有更改基本风格？

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

Answer 2

查看jQueryUI的position plugin。它可以帮助你做到这一点。

Answer 3

在this demo中，我添加了一些代码：

$(function(){
    $('.gallery').find('a').each(function(i){
        $(this).append('<div class="number">' + (i+1) + '</div>')
    });
});

和这个css

.gallery .number {
    background: #eee;
    color: #000;
    min-width: 20px;
    height: 20px;
    position: absolute;
    font-size: 20px;
    line-height: 15px;
    bottom: 15px;
    right: 3px;
    z-index: 1;
    text-align: center;
    padding-top: 2px;
}
.gallery a {
    position: relative;
}

编辑：糟糕，您只需将i+1添加到演示...

即可