CSS無序列表將各個元素放在一起

Question

我遇到了一個問題，可以按照我想要的方式運行，並可以使用一些幫助。我在一個無序列表中有2個圖像和2個標題，我希望標題能夠顯示在圖像上，但是當我使用定位時，所有內容都會疊加在一起。

HTML

<ul> 
    <li> 
     <img src="image1.png" /> 
     <div>Caption 1</div> 
    </li> 
    <li> 
     <img src="image2.png" /> 
     <div>Caption 2</div> 
    </li> 
</ul> 

CSS

li { 
    position: relative; 
} 

div { 
    position: absolute; 
    bottom: 0; 
    left 0; 
    background: rgba(0,0,0,.8); 
    width: 100% 
    z-index: 10; 
} 

一切都只是堆疊在彼此頂部。預期的輸出是用於頁面上的兩個單獨圖像，並且每個圖像的底部都有一個標題。

我在這裏做錯了什麼？任何幫助將不勝感激！！

感謝， 瑞安

Answer 1

看起來不錯給我。只是修復了一些小問題。

http://jsfiddle.net/isherwood/bQMBG/

li { 
    position: relative; 
    margin-bottom: 20px; 
    list-style-type: none; 
} 
div { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, .8); 
    color: #fff; 
    width: 300px; 
    z-index: 10; 
}