使用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
>
我有一个解决方案，不使用浮标!
在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>
dl.definitions, dl.definitions dt, dl.definitions dd {
display: block;
}
dl.definitions dt {
float: left;
clear: right;
margin-inline-end: 2ch;
}
dl.definitions dd {
float: right;
margin-inline-start: unset;
--definition-indent: 15ch;
width: calc(100% - var(--definition-indent));
}
</style>
<dl class="definitions">
<dt> kjsfjk
<dt> kjsfjk
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
<dt> kjsfjks sdf g fg dgf saf asf asf asdg ag
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dt> kjsfjks
<dt> kjsfjks
<dt> kjsfjks
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</dl>
</html>
CSS网格布局
与表一样，网格布局允许作者将元素对齐为列和行。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
要更改列大小，请查看grid-template-columns属性。
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}
<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>
我找到了一个对我来说似乎完美的解决方案，但它需要额外的<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>
