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

几年前，我使用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添加一个带有照片编号的覆盖图，如下所示：

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

---

有没有可能在不改变基本样式的情况下实现它呢？

查看jQueryUI。它可以帮助您做到这一点。

请查看jQueryUI的。它可以帮助您做到这一点。

代码>位置：绝对将完成此操作。

需要是

位置：相对的

演示：

HTML:

位置：绝对位置将完成此操作。
需要是
位置：相对的

演示：

HTML:

在中，我添加了以下代码：

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

编辑：哦，你可以把
i+1
添加到演示中…
在中，我添加了以下代码：

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

编辑：哎呀，你可以把
i+1
添加到演示中…
我在玩
inline block
但是它是交叉浏览器吗？我想IE在
inline block
方面有一些问题，但是不记得是否只有在怪癖模式下
inline block
在所有浏览器中都可以。但这并不是工作的必要条件。刚好
位置：绝对和
位置：相对在
li
上。我正在玩
内联块
，但它是交叉浏览器吗？我想IE在
内联块
上有一些问题，但不记得是否只有在怪癖模式下
内联块
在所有浏览器中都可以。但这并不是工作的必要条件。刚好
位置：绝对和
位置：相对在
li
上。这才是我真正想要的。我想我玩过
.gallery a{position:relative}
，但是运气不好，现在想知道我做错了什么。。。谢谢只是希望我能修复肖像图像（#9，#10）不，我遇到了和我尝试让它工作时一样的麻烦：a显示了问题。这正是我所寻找的。我想我玩过
.gallery a{position:relative}
，但是运气不好，现在想知道我做错了什么。。。谢谢只希望我能修复肖像图像（#9，#10）不，我遇到了和我尝试让它工作时一样的麻烦：a显示了问题。
$(function(){
    $('.gallery').find('a').each(function(i){
        $(this).append('<div class="number">' + (i+1) + '</div>')
    });
});

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