stile un elenco definitition semplice valore della chiave impostato

Question

mi piacerebbe utilizzare un elenco di definizioni di semplice come:

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

a rendere qualcosa di simile:

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

L'elenco definizione sembra semanticamente il migliore opzione qui.

Utilizzando il nuovo stile di visualizzazione di run-in farà il trucco:

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

Ma questo non è ampiamente ancora supportato. Come posso modellare la mia lista di definizioni per un migliore supporto cross-browser (ie6 non necessario), senza modificare l'html (attualmente utilizzo la visualizzazione in linea e aggiungo brutti br)?

Modifica per chiarire:

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

non funzionerà, perché avrebbe reso come:

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

La progettazione specifica che questi campi multi-linea dovrebbe avvolgere al punto di partenza della linea di preservare spazio.

Answer 1

penso che questo dovrebbe funzionare:

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

Un'altra opzione che è utile è la pseudo-classe :after. Si potrebbe saltare il colon su ciascuno dei dt elementi e avere:

dt:after { 
    content: ":"; 
} 

Questo lo rende più flessibile e si può cambiare quel personaggio in tutta la lista e il sito nel suo complesso, o di sbarazzarsi di esso, se si ha voglia esso.

Per risolvere il problema del wrapping che hai menzionato, dovrai impostare le larghezze su entrambi gli elementi dt e dd. Oppure, usa una tabella, con th per nome/indirizzo ecc. E td per i "dati". IMO una tabella è una soluzione semanticamente accettabile qui - è è dati tabulari.

Answer 2

Si potrebbe semplicemente spostare il dd a sinistra dell'elemento precedente in questo modo.

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

È anche possibile aggiungere un attributo di larghezza a entrambi per l'allineamento extra.

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

Answer 3

Beh, si può semplicemente lasciare che dt float: left

dt { float: left; } 

oppure lasciare che dt visualizzazione in linea:

dt { display: inline; } 

Answer 4

Penso che questo (uncomment prima linea per testare per la piccola larghezza):

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

Answer 5

È necessario rimuovere il margine sinistro predefinito dal dd.

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