使用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在同一行?即生产出看起来像这样的东西:
因为我还没有看到一个适用于我的用例的示例，所以这里是我能够实现的最完整的解决方案。
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。但我还没有对此进行测试，所以请谨慎处理。
因为我还没有看到一个适用于我的用例的示例，所以这里是我能够实现的最完整的解决方案。
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。但我还没有对此进行测试，所以请谨慎处理。
我找到了一个对我来说似乎完美的解决方案，但它需要额外的<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>
这一工作显示他们作为表，与边界，它应该响应3em的宽度第一列。换行只是将比列宽的任何单词分开
dl { display:block;
border:2px solid black;
margin: 1em;}
dt { display:inline-block;
width:3em;
word-wrap:break-word;}
dd { margin-left:0;
display:inline;
vertical-align:top;
line-height:1.3;}
dd:after { content:'';display:block; }
<table>与<dl>的比较:
<!DOCTYPE html>
<html>
<style>
dl { display:block;border:2px outset black;margin:1em; line-height:18px;}
dt { display:inline-block;width:3em; word-wrap:break-word;}
dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;}
dd:after { content:'';display:block; }
.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}
.glosstable, table, tbody, tr, td, dl, dt {font-size:100%; line-height:18px;}
.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; }
td.first {width: 2.5em;}
</style>
<body>
Table<br>
<table class="glosstable">
<tr><td class="first">Milk</td>
<td class="glossdata">Black hot drink</td>
</tr>
<tr><td class="first">Coffee2</td>
<td class="glossdata">Black hot drink</td>
</tr>
<tr><td>Warm milk</td>
<td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
<dt>Milk</dt>
<dd class="glossdata">White cold drink</dd>
<dt>Coffee2</dt>
<dd class="glossdata">Black cold drink</dd>
<dt>Warm Milk</dt>
<dd class="glossdata">White hot drink</dd>
</dl>
</body>
</html>
