带 DT 的 DD 文本

Question

I'm hoping to be able to use a definition list <dl> to format something like this:

The HTML is something like this:

<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>

However, whatever I do, I can't get the <dt> and <dd> to look like inline text. The closest I got was to float the <dt> left (bolding for emphasis):

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

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

However, as it is, the line-height of the <dt> prevents a natural wrap to the next line, and adjusting the margin-bottom to something negative causes the <dd> to be too close when the <dt> itself wraps.

Is there an easy way to format this with definition lists, or should I just use, say, a <ul> and forget <dl> ?

Answer 1

Is this a feasible answer?

 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>