style une liste definitition aussi simple valeur de clé définie

Question

Je voudrais utiliser une liste de définition aussi simple que:

<dl> 
    <dt>name:</dt> 
    <dd>Tomas</dd> 

    <dt>address:</dt> 
    <dd>this is a very long wrapping address</dd> 

    <dt>age:<dt> 
    <dd>29</dd> 
<dl> 

pour render quelque chose comme:

name: Tomas 
address: this is a very long 
wrapping address 
age: 29 

La liste de définition semble sémantiquement meilleure option ici.

Utilisation du nouveau style d'affichage run-in fera l'affaire:

<style> dt { display: run-in; } </style> 

Mais ce n'est pas encore largement pris en charge. Comment puis-je styliser ma liste de définitions pour un meilleur support cross-browser (ie6 pas nécessaire), sans changer le html (actuellement j'utilise display inline et j'ajoute des brides disgracieux)?

Modifier pour clarifier:

dt { clear: left; } 
dd { float: left; } 

ne fonctionnera pas parce qu'elle rendrait comme:

name: Tomas 
address: this is a very long 
     wrapping address 
age: 29 

La conception précise que ces champs multi-ligne devrait envelopper au début de la ligne pour préserver espace.

Answer 1

Je pense que cela fonctionnerait:

dt { 
    float: left; 
    clear: left; 
    margin: 0; 
    padding: 0 .5em 0 0; 
} 
dd { 
    margin: 0; 
    padding: 0; 
} 

Une autre option qui est utile est le :after pseudo-classe. Vous pouvez sauter le côlon sur chacun des dt éléments et ont:

dt:after { 
    content: ":"; 
} 

Cela rend plus souple et vous pouvez changer ce caractère dans la liste et le site Web dans son ensemble, ou de se débarrasser de celui-ci si vous vous sentiez comme il. Pour résoudre le problème d'emballage que vous avez mentionné, vous devez définir les largeurs sur les éléments dt et dd. Ou, utilisez une table, avec th pour le nom/adresse etc et td pour les "données". IMO une table est une solution sémantiquement acceptable ici - il est données tabulaires.

Answer 2

Vous pouvez juste faire flotter le dd à la gauche de l'élément précédent comme ça.

dt { clear: left; } 
dd { float: left; } 

Vous pouvez également ajouter un attribut de largeur pour un alignement supplémentaire.

dt { clear: left; width: 20%; } 
dd { float: left; } 

Answer 3

Eh bien, vous pouvez simplement laisser dt float: left

dt { float: left; } 

ou bien laisser dt ligne d'affichage:

dt { display: inline; } 

Answer 4

Je pense que ce (première ligne uncomment pour tester petite largeur):

dl, dd, dt { margin: 0; } 
/*dl { width: 80px; }*/ 
dl dt, dl dd { display: inline; } 
dl dd:after { content: ' '; padding-left: 100%; } 

Answer 5

Vous devez supprimer la marge gauche par défaut du dd.

dt {float:left;clear:left;margin-right:5px;} 
dd {margin:0;}