使用CSS，我如何样式如下:
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
dt的内容显示在一列，dd的内容显示在另一列，每个dt和对应的dd在同一行?即生产出看起来像这样的东西:
参见jsFiddle演示
我需要一份完全符合项目描述的列表，该列表展示了一家公司的员工，左边是他们的照片，右边是他们的信息。我设法在每个DD之后使用伪元素来完成清理:
.myList dd:after {
content: '';
display: table;
clear: both;
}
此外，我希望文本只显示在图像的右侧，而不是在浮动图像下进行包装(伪列效果)。这可以通过添加一个带有CSS overflow: hidden;DD标签的内容。您可以省略这个额外的DIV，但是DD标记的内容将被包装在浮动的DT下面。
在使用了一段时间后，我能够支持每个DD的多个DT元素，但不能支持每个DT的多个DD元素。我尝试添加另一个可选类，只在最后一个DD之后清除，但随后的DD元素包装在DT元素下(不是我想要的效果……我希望DT和DD元素形成列，而额外的DD元素太宽)。
根据所有的权利，这应该只能在IE8+中工作，但由于IE7中的一个怪癖，它也可以在那里工作。
根据对dt和dd元素的样式不同，您可能会遇到一个问题:使它们具有相同的高度。例如，如果你想在这些元素的底部添加一些可见的边界，你很可能想在相同的高度显示边界，就像在表格中一样。
一种解决方案是作弊，将每一行都设置为“dl”元素。
(这相当于在表中使用tr)
我们失去了定义列表的原始兴趣，但在对应的情况下，这是一种简单的方式来获得快速和漂亮的伪表。
CSS:
dl {
margin:0;
padding:0;
clear:both;
overflow:hidden;
}
dt {
margin:0;
padding:0;
float:left;
width:28%;
list-style-type:bullet;
}
dd {
margin:0;
padding:0;
float:right;
width:72%;
}
.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}
HTML:
<div class="huitCinqPts bord_inf_gc">
<dl><dt>Term1</dt><dd>Definition1</dd></dl>
<dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>
我也遇到过类似的问题。我想让定义在同一行，但前提是这些项没有超过它的起始位置。在这种情况下，我希望它在新行上。经过多次试验和错误，我找到了一个解决方案，这是惊人的简单使用浮动。
<html>
<style>
dl.definitions, dl.definitions dt, dl.definitions dd {
display: block;
}
dl.definitions dt {
float: left;
clear: right;
margin-inline-end: 2ch;
}
dl.definitions dd {
float: right;
margin-inline-start: unset;
--definition-indent: 15ch;
width: calc(100% - var(--definition-indent));
}
</style>
<dl class="definitions">
<dt> kjsfjk
<dt> kjsfjk
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
<dt> kjsfjks sdf g fg dgf saf asf asf asdg ag
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dt> kjsfjks
<dt> kjsfjks
<dt> kjsfjks
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</dl>
</html>
这里的大多数建议都是可行的，但是您应该只将通用代码放入样式表中，并将特定代码放入如下所示的html代码中。否则，您将最终得到一个臃肿的样式表。
我是这样做的:
你的样式表代码:
<style>
dt {
float:left;
}
dd {
border-left:2px dotted #aaa;
padding-left: 1em;
margin: .5em;
}
</style>
你的html代码:
<dl>
<dt>1st Entity</dt>
<dd style="margin-left: 5em;">Consumer</dd>
<dt>2nd Entity</dt>
<dd style="margin-left: 5em;">Merchant</dd>
<dt>3rd Entity</dt>
<dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
<dt>4th Entity</dt>
<dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>
是这样的
