CODEWITHSUNDEEP
htmlcsssemantic-markup
diwhyyyyy
diwhyyyyy

Reputation: 6372

DD text inline with DT

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

enter image description here

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

Upvotes: 1

Views: 75

Answers (1)

Servesh Chaturvedi
Servesh Chaturvedi

Reputation: 559

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>

Upvotes: 1

Related Questions