使用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中的一个怪癖，它也可以在那里工作。
因为我还没有看到一个适用于我的用例的示例，所以这里是我能够实现的最完整的解决方案。
dd {
margin: 0;
}
dd::after {
content: '\A';
white-space: pre-line;
}
dd:last-of-type::after {
content: '';
}
dd, dt {
display: inline;
}
dd, dt, .address {
vertical-align: middle;
}
dt {
font-weight: bolder;
}
dt::after {
content: ': ';
}
.address {
display: inline-block;
white-space: pre;
}
Surrounding
<dl>
<dt>Phone Number</dt>
<dd>+1 (800) 555-1234</dd>
<dt>Email Address</dt>
<dd><a href="#">example@example.com</a></dd>
<dt>Postal Address</dt>
<dd><div class="address">123 FAKE ST<br />EXAMPLE EX 00000</div></dd>
</dl>
Text
奇怪的是，它对display: inline-block不起作用。我想如果你需要设置任何dt元素或dd元素的大小，你可以将dl的显示设置为display: flexbox;显示:-webkit-flex;显示:flex;dd元素和dt元素的flex简写类似flex: 1.1 50% display为display: inline-block。但我还没有对此进行测试，所以请谨慎处理。
根据对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>
我找到了一个对我来说似乎完美的解决方案，但它需要额外的<div>标记。
事实证明，没有必要使用<table>标记来像在表中那样对齐，使用display:table-row;和显示:表格单元;风格:
<style type="text/css">
dl > div {
display: table-row;
}
dl > div > dt {
display: table-cell;
background: #ff0;
}
dl > div > dd {
display: table-cell;
padding-left: 1em;
background: #0ff;
}
</style>
<dl>
<div>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
</div>
<div>
<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>
</div>
<div>
<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>
</div>
</dl>
