DD 文本与 DT 内联

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>

DD 文本与 DT 内联

DD text inline with DT

html

css

semantic-markup