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

我写了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一点点覆盖有照片数量，这样的事情：

example

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

是否可以实现它没有改变基础风格？

来源

2011-11-22 neurino

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

来源

2011-11-23 00:19:24 ThinkingStiff

我被打'内联块'，但它是交叉浏览器固体？ – neurino

我认为IE有'inline-block'的一些问题，但不记得是否只在怪癖模式下 – DiogoDoreto

'inline-block'在所有浏览器中都可以。这不是要求这个工作。只是'位置：绝对;'在数字和''位置：相对;''''''''。 – ThinkingStiff

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

来源

2011-11-22 23:59:41 DiogoDoreto

好吧，我不希望在jQueryUI的拉动只是添加了一些... – neurino

在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到演示...

来源

2011-11-23 00:30:54 Mottie

这真的是我正在寻找的。我想我玩过'.gallery一个{position：relative}'但没有运气，现在想知道我做错了什么......谢谢。只希望我可以修复肖像图像（＃9，＃10） – neurino

不，我遇到同样的麻烦，因为当我尝试使它工作：[演示页面在这里]（http://iloop.it/custom_numbered。 asp）显示了这个问题。 – neurino

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

回答

相关问题