带有悬挂缩进的内联描述列表答案

【问题标题】：Inline description list with hanging indent带有悬挂缩进的内联描述列表
【发布时间】：2020-07-06 15:45:52
【问题描述】：

我想创建一个描述列表，其中每个术语和描述对出现在一行中，但这些“行”带有悬挂缩进，以防它们换行。

这是我想要的视觉效果，但使用 p 元素代替：

p {
  margin: 0 0 0 2em;
  text-indent: -2em
}

<p><b>H:</b> Himenaeos</p>
<p><b>U:</b> Ullamcorper</p>
<p><b>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</b> Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</p>
<p><b>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</b> Vestibulum risus a tortor integer</p>
<p><b>Q:</b> Quisque</p>

到目前为止，我已经设法将每一对显示为内联，但悬挂缩进并不幸运。

我当前的代码：

dt,
dd {
  display: inline;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
  padding: 0
}

dt::before {
  content: "";
  display: block;
}

<dl>
  <dt>H:</dt>
  <dd>Himenaeos</dd>
  <dt>U:</dt>
  <dd>Ullamcorper</dd>
  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
  <dd>Vestibulum risus a tortor integer</dd>
  <dt>Q:</dt>
  <dd>Quisque</dd>
</dl>

【问题讨论】：

标签： html css

【解决方案1】：

您可以将定义列表项包装在 div 中，并使用更少的文本重置 div 中这些 dd 的边距。

dt,
dd {
  display: inline-block;
}

dt {
  font-weight: bold;
}
div:nth-of-type(1) dd,
div:nth-of-type(2) dd,
div:nth-of-type(5) dd {
 margin: 0;
}

<dl>
  <div>
  <dt>H:</dt>
  <dd>Himenaeos</dd>
  </div>
  <div>
  <dt>U:</dt>
  <dd>Ullamcorper</dd>
  </div>
  <div>
  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
  </div>
  <div>
  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
  <dd>Vestibulum risus a tortor integer</dd>
  </div>
  <div>
  <dt>Q:</dt>
  <dd>Quisque</dd>
  </div>
</dl>

【讨论】：

这一问题的问题在于，“Vestibulum risus a tortor integer”的描述在其术语跨越多行时从新行开始。

【解决方案2】：

您可以考虑使用正填充来纠正负边距，您将获得相同的效果：

dl {
 padding-left:2em;
}
dt,
dd {
  display: inline;
  margin:0;
  padding:0;
}
dt {
 margin-left:-2em;
}

dd:after {
  content:"";
  display:block;
}
dt {
  font-weight: bold;
}

<dl>
  <dt>H:</dt>
  <dd>Himenaeos</dd>
  <dt>U:</dt>
  <dd>Ullamcorper</dd>
  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
  <dd>Vestibulum risus a tortor integer</dd>
  <dt>Q:</dt>
  <dd>Quisque</dd>
</dl>

【讨论】：