下面是另一个选项，通过内联显示dt和dd，然后在dd后面添加换行符。

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

这类似于上面Navaneeth的解决方案，但是使用这种方法，内容不会像在表中那样排列，但是无论长度如何，dd将立即在每一行上跟随dt。

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>

这里的大多数建议都是可行的，但是您应该只将通用代码放入样式表中，并将特定代码放入如下所示的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>

是这样的

我有一个解决方案，不使用浮标! 在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;
}

下面是另一个选项，通过内联显示dt和dd，然后在dd后面添加换行符。

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

这类似于上面Navaneeth的解决方案，但是使用这种方法，内容不会像在表中那样排列，但是无论长度如何，dd将立即在每一行上跟随dt。

在我的例子中，我只是想在每个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: ":";
}