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

Question

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

这是我想要的视觉效果，但使用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>

Answer 1

您可以考虑使用正填充来纠正负边距，您将获得相同的效果：dl {&nbsp;padding-left:2em;}dt,dd {&nbsp; display: inline;&nbsp; margin:0;&nbsp; padding:0;}dt {&nbsp;margin-left:-2em;}dd:after {&nbsp; content:"";&nbsp; display:block;}dt {&nbsp; font-weight: bold;}<dl>&nbsp; <dt>H:</dt>&nbsp; <dd>Himenaeos</dd>&nbsp; <dt>U:</dt>&nbsp; <dd>Ullamcorper</dd>&nbsp; <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>&nbsp; <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>&nbsp; <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>&nbsp; <dd>Vestibulum risus a tortor integer</dd>&nbsp; <dt>Q:</dt>&nbsp; <dd>Quisque</dd></dl>

Answer 2

您可以将定义列表项包装在 div 中，并用较少的文本重置 div 中那些 dd 的边距。dt,dd {&nbsp; display: inline-block;}dt {&nbsp; font-weight: bold;}div:nth-of-type(1) dd,div:nth-of-type(2) dd,div:nth-of-type(5) dd {&nbsp;margin: 0;}<dl>&nbsp; <div>&nbsp; <dt>H:</dt>&nbsp; <dd>Himenaeos</dd>&nbsp; </div>&nbsp; <div>&nbsp; <dt>U:</dt>&nbsp; <dd>Ullamcorper</dd>&nbsp; </div>&nbsp; <div>&nbsp; <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>&nbsp; <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>&nbsp; </div>&nbsp; <div>&nbsp; <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>&nbsp; <dd>Vestibulum risus a tortor integer</dd>&nbsp; </div>&nbsp; <div>&nbsp; <dt>Q:</dt>&nbsp; <dd>Quisque</dd>&nbsp; </div></dl>