具有内联对的定义列表

Question

我正在尝试创建一个术语定义对的定义列表,每个对都存在于一条单独的行上.我试过制作dts和dds display:inline,但后来我失去了对之间的换行符.如何确保每对都有一条线(而不是每个单独的术语/定义)？

例:

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

收益:

Term 1 Def 1
Term 2 Def 2

使它们内联的CSS将是:

dt,dd{display:inline;}

收益:

Term 1 Def 1 Term 2 Def 2

...这不是我想要的(缺少对之间的换行符).

Answer 1

试试这个:

dt, dd { float: left }
dt { clear:both }

dt dd如果你想在它们之间留出更多空间,请添加margin-bottom .

Answer 2

另一种方案:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

Answer 3

我尝试了这些答案,最后我最终得到了这个答案.

我简化为:

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }