通过CSS或JavaScript在行中间点

Question

你可以帮助我实现这个例子中的布局吗？

此列表中的示例项动态加载到视图中，长度可以是各种各样的。似乎点的数量应该根据这个变化。我尝试使用<table>元素，但只有我能设置的是虚线边框到底部，这不是我的情况，因为我需要它在行的中间。

Answer 1

您可以将圆点设为TD的垂直居中背景。内容本身具有白色背景，因此点隐藏在文本下方。

此处示例：

http://jsfiddle.net/willemvb/QkEzr/

Answer 2

以下是使用CSS快速简便的方法。只需创建三个块（div）。并给中间div一个底部边框。然后将它的位置移动一点（边缘值为负值）。我猜这就是你需要的。

如果您正在使用表格，那么没问题。只需在第二列中添加另一个div。并按上面所述添加底部边框。然后移动div上部。简单。

Answer 3

这是一个javascript解决方案。我们的想法是将字体设置为等宽字体，然后根据给定行中的字符数相对于样本列中的最大字符数放置点。

var samplePts = new Array( new Array("Sample",23), new Array("Longer Sample",9), new Array("Much Londer Sample",125) );

var maxSampleLen = 0;
for (var i=0; i<samplePts.length; i++){
    var currLen = samplePts[i][0].length;
    if (currLen > maxSampleLen){
    maxSampleLen = currLen;
    }
}

for (var i=0; i<samplePts.length; i++){
    var outputStr = "<div style='font-family: monospace;'>"+samplePts[i][0];
    for (var n=0; n<maxSampleLen-samplePts[i][0].length+5; n++){
    outputStr += "&#183;";
    }
    outputStr += samplePts[i][1]+"</div>";
    document.write(outputStr);
}