与 DT 内联的 DD 文本

Question

我希望能够使用定义列表<dl> 来格式化如下内容：

HTML 是这样的：

<dl>
  <dt>Abandonnement</dt>
  <dd>m. an abandonning, quitting, forsaking, leaving off, giving over, laieng open for, prostituting vnto, others; also a proscribing or outlawing.
    <dl>
      <dt>Abandonnément de raison.</dt>
      <dd>a wilfull defection, revolting, or swarming, from reason.</dd>
    </dl>
  </dd>
</dl>

但是，无论我做什么，我都无法让 <dt> 和 <dd> 看起来像内联文本。我得到的最接近的是将<dt> 向左浮动（粗体表示强调）：

dt {
  font-weight: bold;
  float:left;
  clear: left;
  padding-right: 0.5em;
}

https://jsfiddle.net/dL6mkba3/2/

然而，事实上，<dt> 的 line-height 会阻止自然换行到下一行，并且将 margin-bottom 调整为负数会导致 <dd> 在 <dt> 时太靠近自己包装。

有没有一种简单的方法可以使用定义列表对其进行格式化，或者我应该只使用<ul> 而忘记<dl>？

Answer 1

这是一个可行的答案吗？

dl {
  padding-left: 1em;
  text-indent: -1em;
}
dt {
  font-weight: bold;
  display: inline;
}
dd {
  display: inline;
  margin-left: 0.5em;
}
.subdef {
  display: inline-block;
  margin-block: 0.2em;
  padding-left: 0;
  text-indent: 0;
}

<dl>
  <dt>Abandonnement</dt>
  <dd>m. an abandonning, quitting, forsaking, leaving off, giving over, laieng open for, prostituting vnto, others; also a proscribing or outlawing.
    <dl class="subdef">
      <dt>Abandonnément de raison.</dt>
      <dd>a wilfull defection, revolting, or swarming, from reason lorem ipsum dolor sit</dd>
    </dl>
  </dd>
</dl>