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和text align来居中内容

参见此示例

http://jsfiddle.net/4gUrZ/

div { text-align:center; }

CSS从上到下列出三角形的项目

2 个答案: