2

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

为了让<li>s 显示为垂直“条”，从下往上，我将它们定位为absolute和 with 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>。结果是这样的：另一个jsfiddle

看到问题了吗？

现在，我可以添加更多 CSS 来容纳额外的内容<li>，但每次都必须这样做会变得乏味且效率低下。

有什么解决办法吗？

4

1 回答 1

1

如果您需要它来动态处理事情，您可以使用一个函数来遍历 lis 并设置left位置。

看小提琴

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

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

如果您知道它们永远不会超过某个数字，那么只需为其添加 CSS 可能会更好。（通过 li:nth-child(n) {} 迭代可能的最大 lis 数）。

于 2013-07-26T10:34:40.300 回答