我想创建一个描述列表，其中每个术语和描述对都出现在一行中，但这些“行”带有悬挂缩进，以防它们换行。
这是我想要的视觉效果，但使用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>
您可以考虑使用正填充来纠正负边距，您将获得相同的效果：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
