jquery - 我想用虚线创建一个有序列表，指示文件的大小。怎么做？

Question

下面的例子：

忽略“257 px”和“324 px”！

谢谢！

Answer 1

我会用纯 CSS 来做

演示http://jsfiddle.net/kevinPHPkevin/j6JWT/252/

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt span:after { content: " .................................................................................." }

已编辑

另一种解决方案是使用绝对位置，仍然是纯 CSS

演示http://jsfiddle.net/kevinPHPkevin/nDNsW/

ol {
    list-style:none;
}
li {
    width: 400px;
    position:relative;
     border-bottom: thin black dotted;
    padding:10px 0;
}
.pdf {
    position:absolute;
    right:0;
    bottom:-17px;
}
.one {
    position:absolute;
    left:0;
    bottom:-17px;
}
span {
    background:#fff;
    display:block;
    margin-bottom:13px;
}

Answer 2

要填补空白，您要么必须有某种固定布局，要么计算该字体中使用的字符的平均宽度，要么只使用等宽字体以确保所有字符的宽度相同。我将做后者（使用等宽）来展示它是如何完成的示例，然后只需弄清楚要插入多少个句点：

var items = {'Big title text here xyxyxyx':'(pdf) 57mb', 
             'Small title text':'(pdf) 57mb'
            },
     ul   = $('<ul />');

$.each(items, function(k,v) {
    var span1 = $('<span />', {text: k}),
        span2 = $('<span />', {text: Array(60 - (k.length+v.length)).join('.')}),
        span3 = $('<span />', {text: v});

    $('<li />').append(span1, span2, span3).appendTo(ul);
});

ul.appendTo('body');

小提琴

编辑：

或者你可以使用像边框这样的假点：http: //jsfiddle.net/Lh7A9/2/

Answer 3

这是我的解决方案：小提琴

不需要图像，不需要分层/遮罩（允许有图案的背景），不需要等宽字体。

HTML

<div class="table">
    <div class="row">
        <div class="title">Big text here</div>
        <div class="dots"></div>
        <div class="value">57 MB</div>
    </div>
     <div class="row">
        <div class="title">Small title text</div>
        <div class="dots"></div>
        <div class="value">104 MB</div>
    </div>
    <div class="row">
        <div class="title">One more for good luck</div>
        <div class="dots"></div>
        <div class="value">4.8 MB</div>
    </div>
</div>

CSS

body {
    background: url(http://subtlepatterns.com/patterns/ps_neutral.png);
}

.row {
    display: table;
}

.title,.dots,.value {
    display: table-cell;
}

.title, .value {
    white-space:nowrap;
}

.table {
    width: 500px;
    margin: 10px;
}

.dots {
    border-bottom: 1px dotted gray;
    width: 100%;
}

尽管您可能想稍微玩一下这些点，但我认为它们的位置太低了。