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

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 {

 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>

Answer 2

您可以将定义列表项包装在 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>