CSS 从上到下以三角形形式列出项目答案

【问题标题】：CSS list items in triangle shape from top to bottomCSS 从上到下以三角形形式列出项目
【发布时间】：2014-02-14 14:20:23
【问题描述】：

我正在尝试制作基于 css 的高分。我基本上想要的是一个带有列表项的三角形。像这样：

   1
 2 3 4
5 6 7 8 9

我尝试了几种方法来使我的元素居中，但我就是无法让它发挥作用。当我绝对定位元素时，它们会相互叠加。 Margin-left: 10% 和 margin-right:10% 也不起作用，它只是在改变边距列表项元素之间。我已经包含了一个 jsfiddle，所以你可以看看它：

http://jsfiddle.net/us454/

希望有人能帮帮我！

【问题讨论】：

stackoverflow.com/questions/10411215/… SO上有几个很好的解决方案。

标签： html css

【解决方案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;
}

【讨论】：

真的很棒！跟上
谢谢@CodingAnt 我想重复 uls 有点难看。最好的方法是将它添加到一个元素中。我会尝试更新它。

【解决方案2】：

您可以使用 div 和 text align 来使内容居中

看这个例子

http://jsfiddle.net/4gUrZ/

div { text-align:center; }

【讨论】：