Leaders à points CSS avec fond texturé

Question

Comment ajouter des leaders de points CSS sur un fond texturé ?

Je sais comment ajouter des points de repère entre les éléments, mais je ne trouve pas de méthode qui me permette de les ajouter lorsque le texte se trouve sur un fond texturé.

Cependant, comme le menu est dynamique, les éléments n'auront pas d'emplacement permanent. Comme ils ne sont pas permanents, je ne peux pas utiliser une image de fond pour faire fonctionner mes points.

Answer 1

Vous pouvez utiliser des flottants et le comportement de display:block;overflow:hidden .

Si les flotteurs (gauche et droite) sont placés avant le bloc avec le style ci-dessus, ils donneront à ce bloc une largeur égale à la largeur du parent moins leur largeur.

Alors, voici le exemple vivant à dabblet - vous pouvez le réaliser avec presque n'importe quelle balise et utiliser n'importe quel style (arrière-plan au lieu de bordure en pointillés) sur l'élément leader.

Answer 2

J'ai fait une petite expérience :

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

Answer 3

Le PO demandait de l'aide pour faire cela avec un fond texturé, le simple fait de masquer les éléments avec une couleur de fond ne fonctionnera PAS avec ce que le PO voulait. Je rencontre également le même problème. La suggestion sur w3.org ne répond pas non plus à cette exigence :/ /