Question

如何在定义列表中添加一个分隔定义组的行，使用浮动dt和dd元素，而不将每个组拆分成自己的列表？

我想要这个......

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

......要像这样显示......

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

请注意，li元素上的连续边框不会破坏虚线模式。如果我为每个dt和dd元素添加一个边框，它就会。

Answer 1

这够了吗？

dl{border-bottom:1px solid #000;}
dt{border-top:1px solid #000;}
dt:first-child{border-top:0}

演示 http://jsfiddle.net/gaby/nv7fW/1/

Answer 2

检查这种风格

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

当dt和dd浮动时，在定义列表中的组之间添加边框？

2 个答案: