增長列表項目如圖

Question

我有一個列表，列表項目的動態增長，直到100％。這工作。 但我希望它看起來像this

所以在這裏我的問題是。我怎樣才能讓他們成長到頂峯。我嘗試了高度，但隨後他們發展到了底部。同樣用CSS旋轉它們並不是真的有效，因爲越多的列表項被添加越多的列表移動到底部...

有沒有人有任何想法？

謝謝！

Answer 1

對li -elements使用絕對定位。例如：

http://jsfiddle.net/J5pB7/

ul{ 
    height:300px; 
    border:1px solid #666; 
    position:relative; 
} 
li{ 
    display:inline-block; 
    width:20px; 
    position:absolute; 
    bottom:0px; 
    background-color:green; 
} 
#a{ 
    height:50%; 
    margin-left:30px; 
} 
#b{ 
    margin-left:80px; 
    height:10%; 
} 
#c{ 
    margin-left:130px; 
    height:90% 
}