css - CSS または JavaScript による行の中央のドット

Question

この例のようにレイアウトを実現するのを手伝ってもらえますか?

このリストのサンプル アイテムはビューに動的に読み込まれ、長さはさまざまです。そして、これに合わせて点数も変化するようです。要素を使用しようとしまし<table>たが、設定できるのは下に点線の境界線だけであり、行の中央に必要なので、これは私の場合ではありません。

Answer 1

ドットをTDの垂直方向の中央に配置することができます。コンテンツ自体の背景は白なので、テキストの下にドットが隠れています。

ここでの例：

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

Answer 2

CSSだけで素早く簡単にできることを次に示します。3 つのブロック (div) を作成するだけです。そして、中央の div に下の境界線を付けます。次に、その位置を少し上に移動します (負の値のマージントップ)。それがあなたが必要としていたものだと思います。

テーブルを使用している場合は問題ありません。2 番目の列内に別の 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);
}