时间戳

首页 > 解决方案 > 说明列表：每对单独一行

html - 说明列表：每对单独一行

问题描述

我有一个描述列表，我需要将每个描述与其术语放在同一行。

我可以使用如下所示的代码，但我不喜欢它。看起来不专业，来自石器时代。我相信它应该在这里使用 flexbox，但是如何？

dt, dd { float: left; }
dt { clear: both; font-weight: bold; }
dd { margin-inline-start: 1em; } /* I would rather avoid overwriting browser defaults... */
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

标签： htmlcssflexbox

解决方案

Applying display: flexondl帮助你实现 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>

推荐阅读