Inline definition lists

I'm trying to get a definition list to display properly with CSS so that the term and definition are inline, but multiple terms or definitions after one another are displayed as a block element. So

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dd>Definition</dd>
</dl>

Should display as:

Term Definition

Term Definition

Term Definition

Definition

But for some reaso开发者_运维问答n, it doesn't line up right. If I have simple code like the above, it works fine, but if I include any block elements within a <dd> it fails and makes everything a block element. I do not want this. I'm using this CSS:

dl.inline dt, dl.inline dd {
    display: inline;
    float: left;
    margin: 0 0.5em 0 0;
}

dl.inline dd + dt, dl.inline dd + dd {
    clear: left;
}

What am I missing to get it to behave?

Is this what you're after?

http://jsfiddle.net/nLGar/1/

dl.inline dt, dl.inline dd {
    float: left;
    margin: 0 0.5em 0 0;
    background: #ccc
}
dl.inline dd + dt, dl.inline dd + dd {
    clear: left
}
dl.inline dd + dd {
    float: none
}
dl.inline dt {
    font-weight: bold
}

Float elements are automatically displayed as a block elements and display:inline rule is ignored.

dl.inline dt, dl.inline dd {
    display: inline;
}
dl.inline dt {
    font-weight: bold;
}

If you want to set margin-right, you have use display: inline-block