使用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在同一行?即生产出看起来像这样的东西:
这一工作显示他们作为表，与边界，它应该响应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>
在我的例子中，我只是想在每个dd元素后面加一个换行符。
例如，我想这样做:
<dl class="p">
<dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
<dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>
就像这个的默认样式:
<p>
<span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
<span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>
就像这样:
2021 - 02 - 03 t14:23:43.073z创建
2021 - 02 - 03 t14:44:15.929z更新
为了做到这一点，我使用了下面的CSS:
dl.p > dt {
display: inline;
}
dl.p > dd {
display: inline;
margin: 0;
}
dl.p > dd::after {
content: "\A";
white-space: pre;
}
或者你可以使用这样的CSS:
dl.p > dt {
float: left;
margin-inline-end: 0.26em;
}
dl.p > dd {
margin: 0;
}
我还在每个dt元素后面添加了一个冒号:
dl.p > dt::after {
content: ":";
}
这里的大多数建议都是可行的，但是您应该只将通用代码放入样式表中，并将特定代码放入如下所示的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>
是这样的
