与 DT 内联的 DD 文本

Posted 2023-04-13

【中文标题】与 DT 内联的 DD 文本

【英文标题】：DD text inline with DT

【发布时间】：2021-12-18 12:43:40

【问题描述】：

我希望能够使用定义列表<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>？

【参考方案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>

【讨论】：

是否可以停止相邻的多个子项内联？ (jsfiddle.net/vem5nLu3)

当然，您可以将每组 dt 和 dd 包装在它自己的 div jsfiddle.net/JHeth/q3we4aoj/1 这是来自 MDN developer.mozilla.org/en-US/docs/Web/HTML/Element/… 的一些信息