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

Question

以下示例：

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

谢谢！

Answer 1

我会用纯CSS

来做

DEMO 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: " .................................................................................." }

<强> EDITED

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

DEMO 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');

FIDDLE

修改

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

Answer 3

这是我的解决方案：fiddle

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

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%;
}

虽然你可能想稍微玩点，我认为它们有点太低了。