從上到下的三角形CSS列表項目

Question

我試圖做出基於css的高分。 我基本上想要的是帶有列表項目的三角形形狀。 像這樣：

1 
2 3 4 
5 6 7 8 9 

我嘗試了幾種方法，以我爲中心的元素，但我不能得到它的工作。 當我確定元素的位置時，它們是彼此重疊的。 剩餘邊距：10％和邊距右邊：10％也不起作用，它只是在列表項元素之間更改邊距 。 我已經包含了的jsfiddle，這樣你就可以在它看一看：

http://jsfiddle.net/us454/

希望有人能幫助我！

Answer 1

這是一個可能的解決方案。無論哪種方式。出於這個原因，不要爲UL設計風格。更好地利用列表項：

http://jsfiddle.net/y3p8f/

ul.triangle 
{ 
    margin: auto; 
    padding: 0; 
    display: block; 
    text-align: center; 
} 

ul.triangle li 
{ 
    border-radius:50px; 
    background-color:black; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
} 

HTML：

<ul class="triangle"> 
    <li></li> 
</ul> 

<ul class="triangle"> 
    <li></li> 
    <li></li> 
</ul> 
.... 

更新：

這裏是一個稍微乾淨的版本：http://jsfiddle.net/y3p8f/2/

這追加的所有項目合併成一個UL

ul.triangle, 
ul.triangle li 
{ 
    margin: auto; 
    padding: 0; 
} 

ul.triangle > li 
{ 
    display: block; 
    text-align: center; 
} 

ul.triangle > li > ul li 
{ 
    border-radius:50px; 
    background-color:black; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
} 

Answer 2

可以使用div和文本對齊到中心內容

見這個例子

http://jsfiddle.net/4gUrZ/

div { text-align:center; }