Style a definitition list as simple key value set

css, html, semantic-markup

Solution

I think this would work:

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

Another option that is useful is the `:after` pseudo-class. You could skip the colon on each of the `dt` elements and have:

dt:after {
  content: ":";
}

This makes it more flexible and you can change that character across the list and website as a whole, or get rid of it if you felt like it.

To solve the wrapping problem you mentioned, you'll need to set widths on both the `dt` and `dd` elements. Or, use a table, with `th` for name/address etc and `td` for the "data". IMO a table is a semantically acceptable solution here - it is tabular data.

Problem

I'd like to use a definition list as simple as: ``` <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> ``` to render something like: ``` name: Tomas address: this is a very long wrapping address age: 29 ``` The definition list seems semantically the best option here. Using the new run-in display style will do the trick: ``` <style> dt { display: run-in; } </style> ``` But this isn't widely supported yet. How can I style my definition list for better cross-browser support (ie6 not necessary), without changing the html (currently I use display inline and add ugly br's) ? Edit to clarify : ``` dt { clear: left; } dd { float: left; } ``` won't work because it would render as: ``` name: Tomas address: this is a very long wrapping address age: 29 ``` The design specifies that these multi-line field should wrap to the start of line to preserve space.

Original source