我们这一页有一堆定义列表。在Word中制作样式模型的人想出了这个绝妙的主意，将定义列表呈现为“Term-Value”和悬挂缩进。我得承认它确实很棒，但很难。我一直在玩这个相当多，悬挂缩进真的是必要的，否则页面会变得非常难看。
如果我尝试使用网格（反正是次优的）；由于之前的内容，页面呈现出现故障。但dd上的悬挂缩进样式似乎并不受欢迎。
null
dl dd {
display: inline;
margin: 0;
padding-top: .25em;
}
dl dd:after{
display: block;
content: '';
}
dl dt{
display: inline-block;
padding-top: .25em;
}
dl dd:before {
content: "- ";
}
dl dd{
text-indent: 3.5em hanging;
}<dl>
<dt>term</dt>
<dd>sentence sized definition belongs here</dd>
<dt>term with long name</dt>
<dd>sentence sized definition belongs here</dd>
<dt>term</dt>
<dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>
</dl>null
您的dd元素是display:inline-text-indent对这些元素不起作用。
现在允许使用divs对术语和描述进行分组,这样就可以直接使用悬挂缩进：
null
dl dt, dl dd {
display: inline;
margin: 0;
}
dl dd::before {
content: "- ";
}
dl div {
text-indent: 3.5em hanging;
padding-top: .25em;
}<dl>
<div>
<dt>term</dt>
<dd>sentence sized definition belongs here</dd>
</div>
<div>
<dt>term with long name</dt>
<dd>sentence sized definition belongs here</dd>
</div>
<div>
<dt>term</dt>
<dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>
</div>
</dl>