html - 内联定义列表

我正在尝试使用CSS正确显示定义列表，以便术语和定义是内联的，但是一个接一个的多个术语或定义显示为一个块元素。所以

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

应显示为：
术语定义
术语定义
术语定义
定义
但不知什么原因，它排不好队。如果我有像上面这样的简单代码，它可以正常工作，但是如果我在<dd>中包含任何块元素，它就会失败，并使所有元素都成为块元素。我不想要这个。我正在使用这个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;
}

我错过了什么才能让它表现出来？

最佳答案

这就是你要找的吗？
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
}

关于html - 内联定义列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5700763/