如何在同一行上获得多个dl / dt / dd标签

Question

我需要在同一行获得多个信息：

姓名：罗伯特年龄：10 性别：男

标签的颜色与值不同。我该怎么做？

Answer 1

dt和dd代码已从浏览器设置display: block。只需将其重置为display: inline或inline-block即可将它们放在同一行。

dt, dd {
  display: inline-block;
  margin: 0;
}
dt {
  font-weight: bold;
}
dt:after {
  content: ":";
}

<dl>
  <dt>Name</dt>
  <dd>Robert</dd>
  <dt>Age</dt>
  <dd>10</dd>
  <dt>Gender</dt>
  <dd>Male</dd>
</dl>