使用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在同一行?即生产出看起来像这样的东西:
我有一个解决方案，不使用浮标!
在codeen上检查这个
Viz.
dl.inline dd {
display: inline;
margin: 0;
}
dl.inline dd:after{
display: block;
content: '';
}
dl.inline dt{
display: inline-block;
min-width: 100px;
}
更新- 2017年1月3日:我已经为这个问题添加了基于弹性盒的解决方案。在链接的代码依赖中检查并根据需要提炼它。
dl.inline-flex {
display: flex;
flex-flow: row;
flex-wrap: wrap;
width: 300px; /* set the container width*/
overflow: visible;
}
dl.inline-flex dt {
flex: 0 0 50%;
text-overflow: ellipsis;
overflow: hidden;
}
dl.inline-flex dd {
flex:0 0 50%;
margin-left: auto;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
这里的大多数建议都是可行的，但是您应该只将通用代码放入样式表中，并将特定代码放入如下所示的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>
是这样的
因为我还没有看到一个适用于我的用例的示例，所以这里是我能够实现的最完整的解决方案。
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。但我还没有对此进行测试，所以请谨慎处理。
这一工作显示他们作为表，与边界，它应该响应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>
