內聯列表元素，添加編號疊加

我寫了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

內聯列表元素，添加編號疊加

回答

相關問題