如何在CSS中使用Content：Before时获得DD标记的悬挂缩进

Question

我们这一页有一堆定义列表。在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

Answer 1

您的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>