描述列表:每一对在自己的线上

应用 display: flex 在 dl 帮助您实现CSS flexbox。但是,为了使它更专业,你可以考虑添加 color padding 以及各种文本格式样式。

dl {
  display: flex;
  flex-wrap: wrap;
  /*change width, font-family and margin as per your requirement*/
  max-width: 400px;
  margin: 0 auto;
  font-family: helvetica, arial, sans-serif
}

dt,
dd {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
}

dt {
  font-weight: 700;
  background: #ddd;
  border: 1px solid #ccc;
}

dd {
  background: #f2f2f2;
  border: 1px solid #ccc;
}

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

所以基本上我会申请 display: flex; dt 因为它是子元素的包装器并应用如下样式:

dl {
    display: flex;
    flex-flow: row wrap;
}
dt, dd {
    width: 50%;
}

基本上,我们告诉flexbox在行中显示项目,如果项目不能包含在dl的宽度中,我们将它包装到下一行。

在 dt, dd

如果你需要更多的背景知识,你可以查看css技巧,非常好的flex指南

您可能需要重新构造代码以使用flex。这是您需要的一切-> A Complete Guide to Flexbox

感谢你的陈述

看起来像是石器时代的不专业的东西