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

我需要这样做，并让<dt>内容垂直居中，相对于<dd>内容。我使用display: inline-block和vertical-align: middle

在这里查看Codepen的完整示例

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

我最近需要混合内联和非内联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 >

这适用于IE7+，符合标准，并允许不同的高度。

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

请参阅JSFiddle。

以下是一个基于弹性的解决方案(SCSS):

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  dt {
    width: 150px;
  }
  dd {
    margin: 0;
    flex: 1 0 calc(100% - 150px);
  }
}

适用于以下HTML (pug)

dl
  dt item 1
  dd desc 1
  dt item 2
  dd desc 2

假设你知道页边距的宽度:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }