Question

How would you add a line separating definition groups in a definition list, with floating dt and dd elements, without splitting each group into its own list?

I would like this …

<style>
  dl { overflow: auto; }
  dt { float: left; clear: left; }
  dd { float: left; }
</style>

<dl>
  <dt>Term #1</dt>
  <dd>Def #1</dd>
  <dd>Def #2</dd>
  <dd>Def #3</dd>
  <dt>Term #2</dt>
  <dd>Def #1</dd>
  <dd>Def #2</dd>
  <dd>Def #3</dd>
  <dt>Term #3</dt>
  <dd>Def #1</dd>
  <dd>Def #2</dd>
  <dd>Def #3</dd>
</dl>

… to display like this …

<style>
  li { border-bottom:1px dashed #000; list-style: none; }
</style>

<ul>
  <li>Term #1 Def #1 Def #2 Def #3</li>
  <li>Term #2 Def #1 Def #2 Def #3</li>
  <li>Term #3 Def #1 Def #2 Def #3</li>
</ul>

Note that the continuous border on the li elements doesn’t break the dash pattern. If I add a border to each dt and dd element, it does.

Answer 1

check this style

<style>
  dt {float:left;clear:left; width:80px; border-bottom:solid 1px #000;}
  dd {float:left; width:50px; border-bottom:solid 1px #000; margin:0;}
</style>