estilo tan simple valor de la clave fija

Question

Me gustaría utilizar una lista de definición tan simple como:

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

para hacer algo como:

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

La lista de definiciones parece semánticamente la La mejor opción aquí.

Usando el nuevo estilo de la pantalla de ejecución en el hará el truco:

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

Pero esto no es apoyado ampliamente todavía. ¿Cómo puedo diseñar mi lista de definiciones para una mejor compatibilidad entre navegadores (es decir, no es necesario), sin cambiar el html (actualmente uso la visualización en línea y agrego feas br)?

Editar para aclarar:

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

no funcionará, ya que haría que:

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

El diseño especifica que estos campos multilínea debe envolver al inicio de la línea de preservar espacio.

Answer 1

creo que esto funcionaría:

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

Otra opción que es útil es la pseudo-clase :after. Se podría omitir los dos puntos en cada uno de los dt elementos y tienen:

dt:after { 
    content: ":"; 
} 

Esto hace que sea más flexible y puede cambiar ese carácter a través de la lista y el sitio web en su conjunto, o deshacerse de él si usted se sentía como eso.

Para resolver el problema de envoltura que mencionó, necesitará establecer anchuras en los elementos dt y dd. O bien, use una tabla, con th para nombre/dirección, etc. y td para los "datos". IMO una tabla es una solución semánticamente aceptable aquí - es es datos tabulares.

Answer 2

Simplemente puede flotar el dd a la izquierda del elemento anterior como ese.

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

También podría agregar un atributo de ancho a la alineación adicional.

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

Answer 3

Bueno, se podría simplemente dejar dt float: left

dt { float: left; } 

o si no, que dt línea de visualización:

dt { display: inline; } 

Answer 4

Creo que esta (primera línea uncomment para la prueba de poca anchura):

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

Answer 5

Debe eliminar el margen izquierdo predeterminado del dd.

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