html - 如何反转垂直条形图方向？

Question

我有一个非常简单的垂直条形图，完全由 css 制作:它由列表项组成:

<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;">40</li>
<li style="height:20%;">10</li>
<li style="height:40%;">20</li>
<li style="height:10%;">5</li>
</ul>

在CSS的帮助下:

.graph {
    width:100%;
    height:250px; 
    position:relative; 
    background-color:gray;
}
.graph li{
    bottom:0; 
    width:5%; 
    text-align:center;  
    background-color:#9FC; 
    list-style:none; 
    position:relative;
    border-style:solid;
    border-width:1px;  
    display:inline-block;}

问题是条是颠倒的。我怎样才能使它们正确上升？谢谢

Answer 1

您的 li 元素应该绝对定位。但是，您需要为每个元素设置边距。我通过添加 left 属性来使用它:

<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;left:20%">40</li>
<li style="height:20%;left:40%">10</li>
<li style="height:40%;left:60%">20</li>
<li style="height:10%;left:80%">5</li>
</ul>

在 CSS 中我修改了这个:

.graph li {
     position:absolute;
}

DEMO