css - CSS或JavaScript在行中间的点

Question

你能帮我实现这个例子中的布局吗？

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

Answer 1

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

这里的例子：

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

Answer 2

以下是您可以使用 CSS 快速轻松地完成的工作。只需创建三个块（div）。并给中间 div 一个底部边框。然后将它的位置移动一点（margin-top 为负值）。我想这就是你所需要的。

如果您使用的是桌子，那么没问题。只需在第二列中添加另一个 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);
}