Can I render a DT on the same line as its DD?

Question

I'm looking for a list of definitions that are inline with their terms, so that

<dl>
  <dt>Email</dt><dd>[email protected]</dd>
  <dt>Bio</dt><dd>Person's full-text bio, which spans multiple lines, and starts on the same line as the text <q>Bio</q>, just like the previous definitions. Any given solution should both allow this text to wrap below the &lt;dd&gt; and then provide a line break afterwards.</dd>
  <dt>Phone</dt><dd>(555) 123-4567</dd>
</dl>

Renders as:

Email: [email protected]

Bio: Person's full-text bio, which spans multiple lines, and starts on the same line as the text “Bio”, just like the previous definitions. Any given solution should both allow this text to wrap below the <dd> and then provide a line break afterwards.

Phone: (555) 123-4567

I've already tried using dt,dd{display:inline}, but that caused all definitions to be displayed on one line with eachother.

I've already reviewed How to style dt and dd so they are on the same line? and it resulted in a more tabular layout, which won't work in this case.

Answer 1

Ok this works just the way you wanted. I fixed wazaminator code so that it works across browsers. The problem was that a few browsers add a margin-start for dds. I didn't test in IE:

dt {
  float: left;
  clear: left;
  margin-right: 5px;
  font-weight: bold;
}

dd {
  margin-left: 0px;
}

http://jsfiddle.net/sPQmw/18/