Question

我正在尝试使用<li>元素构建“条形图”：

为了使<li>显示为垂直“条形图”，并从下向上显示，我将它们定位为absolute和bottom: 0px。现在，我让它像这样手动工作：

#graph {
    height: 300px;
    width: 400;
    border-bottom: 1px solid #CCC;
    position: relative;
}
#graph ul li {
    background: #0071bc;
    height: 200px;     /* the height will eventually be dynamic */
    width: 100px;
    display: block;
    position: absolute;
    bottom: 0px;
}
#graph ul li:nth-child(1) { left: 10px; }
#graph ul li:nth-child(2) { left: 130px; }
#graph ul li:nth-child(3) { left: 250px; }    /* and so on and so forth */

这是jsfiddle

<li>元素被这样分隔为20px - 可以在这里进行数学计算。当我想在列表中添加额外的<li>时会出现问题。它是这样的：another jsfiddle

看到问题？

现在，我可以添加更多的CSS以适应额外的<li>，但每次都必须这样做会变得乏味和低效。

任何解决方案？

Answer 1

如果您需要它来动态处理事物，您可以使用函数迭代lis并设置left位置。

See the fiddle

$('li').each(function(index){
        var xPos = index * 110 + 10;
        $(this).css('left', xPos);
});

如果存在任何页内交互（例如在页面加载后动态添加），您可以执行类似的操作，只需将$(li).each()更改为您需要的任何内容。

如果您知道它们永远不会超过一定数量，那么只需添加CSS就可能更好了。（通过li：nth-child（n）{}迭代可能的最大数量。）

使用绝对定位的li元素构建条形图

1 个答案: