0

以下の例:

ここに画像の説明を入力

「257 px」と「324 px」は無視してください。

ありがとうございました！

4

3 に答える 3

2

私は純粋な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: " .................................................................................." }

編集済み

もう 1 つの解決策は、絶対的な位置でありながら純粋な 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;
}
于 2013-08-03T19:17:01.757 に答える
1

これが私の解決策です：フィドル

画像は不要、レイヤリング/マスキング (パターン化された背景を許可)、等幅フォントの要件もありません。

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

ドットで少し遊んでみたいと思うかもしれませんが、ドットが少し低すぎると思います.

于 2013-08-03T19:32:29.213 に答える
1

ギャップを埋めるには、何らかの固定レイアウトを用意するか、そのフォントで使用される文字の平均幅を計算するか、等幅フォントを使用してすべての文字が同じ幅になるようにする必要があります。どのように行われるかの例を示すために、後者 (モノスペースを使用) を行います。あとは、挿入するピリオドの数を把握するだけです。

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/

于 2013-08-03T19:14:50.807 に答える