Liste de texte..........texte

Bonjour,
je souhaite mettre en forme une liste de texte avec des pointillés entre.

clé1......valeur1
clé2......valeur2
clé12....valeue12

avec la partie en pointillés qui s'adapte en fonction des autres tailles.

Une idée de comment je pourrait faire ca ?

Merci.

Je passais vite fait par la,
pas sur de t'apporter LA solution mais peut etre une idée vite réfléchi

un div avec tes clé en float : left
un div avec tes valeur en float:right
un div avec un background:url(pointillé) repeat-x en width:auto

sans etre sur de moi mais doit y'avoir moyen de faire un truc dans le genre

Hello,

Tu as plusieurs solutions. Tu peux utiliser une image de fond sur un conteneur pour dessiner tes pointillés, et une couleur de fond opaque sur tes clés/valeurs pour masquer cette image de fond. Par exemple:

<p class="line">
  <span>Clé</span>
  <span>Valeur</span>
</p>

.line {
  overflow: hidden; /* bloque le dépassement des flottants */
  background: url(...) repeat-x left 1em;
}
.line > :first-child {
  float: left;
  max-width: 40%;
  padding: 0 10px 4px 0;
  background: white;
}
.line > :first-child {
  float: right;
  max-width: 40%;
  padding: 0 0 4px 10px;
  background: white;
}

Récemment j'ai fait quelque chose de similaire mais en utilisant un pseudo-élément :after en overflow:hidden (pour qu'il s'adapte aux flottants) avec un border-bottom. Ça ressemble à ça (mais c'est pas encore en ligne):


L'avantage c'est qu'on n'utilise pas de couleur de fond opaque sur les éléments à gauche et à droite.

Autre solution envisageable: utiliser du display:table-cell.

Merci pour ces deux solutions.

J'avais pensé à cette solution de pseudo-élément mais j'avais ce probleme de la taille de cet élément.