css - テクスチャ付きの背景を持つ CSS ドット リーダー

Question

テクスチャ背景の上に CSS ドット リーダーを追加するにはどうすればよいですか?

要素間にドット リーダーを追加することには慣れていますが、テキストがテクスチャ背景の上にある場合にドット リーダーを追加できる方法が見つかりません。

ただし、メニューは動的であるため、要素には永続的な場所がありません。それらは永続的ではないため、背景画像を使用してドットを機能させることはできません。

Answer 1

フロートと の動作を使用できますdisplay:block;overflow:hidden。

フロート (左と右) が上記のスタイルのブロックの前に配置されている場合、このブロックの幅は親の幅からその幅を引いたものになります。

これは、dabblet での実際の例です。ほぼすべてのマークアップで実現でき、リーダー要素で任意のスタイル (点線の代わりに背景) を使用できます。

Answer 2

私は小さな実験をしました：

http://jsfiddle.net/Tymek/5QYEz/

HTML

<ul class="leaders">
    <li>
        <span class="description">Pierwszy punkt</span>
        <span class="destination">2</span>
    </li>
    <li>
        <span class="description">Drugi element listy</span>
        <span class="destination">5</span>
    </li>
</ul>

CSS

ul.leaders {
    list-style: none;
    margin-top: -0.3em;
}

ul.leaders li {
    height: 1.2em;
    display: block;
    border-bottom: 1px dotted #000;
}

ul.leaders .description,
ul.leaders .destination {
    display: block;
    margin: 0.3em 0 -0.3em 0;
    background: #fff;
}

ul.leaders .description {
    float: left;
    padding-right: 0.2em;
}

ul.leaders .destination {
    float: right;
    padding-left: 0.2em;
}

</p>

Answer 3

OP は、テクスチャ付きの背景でこれを行うための助けを求めていました。背景色で要素をマスクするだけでは、OP が望んでいたものでは機能しません。私も同じ問題に直面しています。w3.org の提案も、この要件を満たしていません。:/