使用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在同一行?即生产出看起来像这样的东西:
我最近需要混合内联和非内联dt/dd对，通过指定类dl-inline on <dt>元素后面应该跟着inline <dd>元素。
dt.dl-inline {
display: inline;
}
dt.dl-inline:before {
content:"";
display:block;
}
dt.dl-inline + dd {
display: inline;
margin-left: 0.5em;
clear:right;
}
<dl>
<dt>The first term.</dt>
<dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
<dt class="dl-inline">The second term.</dt>
<dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
<dt class="dl-inline">The third term.</dt>
<dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
<dt>The fourth term</dt>
<dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl
>
根据对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>
我有一个解决方案，不使用浮标!
在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;
}
