html - Style a definitition list as simple key value set -

I want to use a definition list such as:

  & lt; Dl & gt; ; & Lt; DT & gt; Name: & lt; / Dt & gt; & Lt; Dd & gt; Tomas & lt; / Dd> & Lt; DT & gt; Address: & lt; / Dt & gt; & Lt; Dd & gt; This is a very long wrapping address & lt; / Dd> & Lt; DT & gt; Age: & lt; DT & gt; & Lt; Dd & gt; 29 & lt; / Dd> & Lt; DL & gt;  

To render something like this:

  Name: Tomas address: This is a very long wrapping address age: 29  

Looks meaningfully the best option in definition list.

Using the new run-in display style would be the trick:

  & lt; Style & gt; DT {display: run-in; } & Lt; / Style & gt;  

but it is not yet widely supported. How can I change my definition list to better cross-browser support (i.e. not necessarily 6), without changing html Currently I use Inline Display and add ugly bricks)?

To clarify edit:

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

will not work because it will render as:

  Name: Tomas address: This is a very long wrapping address age: 29 < / Code> 

Design specifies that these multi-line fields should be wrapped at the beginning of the line to preserve the space.

I think this will work:

  dt {float: Left; Clear: left; Margin: 0; Padding: 0,5 x 0; } DD {margin: 0; Padding: 0; }  

Another option which is useful : followed by pseudo-class. You can leave the colon on each dt elements and it can have:

  dt: {content: ":"; }  

This makes it more flexible and you can convert that character to the entire list, or get rid of it if you feel like this.

To solve the wrapping problem you mentioned, you will need to set the width on both dt and dd elements or, "Data" Use a table with the name / address for and and td IMO is a table one that is an acceptable solution - it is Transitional data