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 元素应该是绝对的。但是，您需要为每个元素设置边距。我通过添加左属性

来使用它

<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

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

1 个答案: