时间戳

首页 > 解决方案 > 如何在 CSS 中的 DD 标签上获得悬挂缩进，同时还使用内容：之前

html - 如何在 CSS 中的 DD 标签上获得悬挂缩进，同时还使用内容：之前

问题描述

我们有这个页面有一堆定义列表。在 Word 中制作样式模型的人想出了这个绝妙的主意，将定义列表呈现为“术语 - 值”并悬挂缩进。我不得不承认它确实很棒，但很难。我一直在玩这个很多，悬挂缩进真的是必要的，否则页面变得非常难看。

如果我尝试使用网格（无论如何都是次优的）；页面渲染由于之前的内容而崩溃。但似乎dd只是不尊重悬挂缩进样式。

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>

在使用hanging关键字之前，我实际上已经尝试过使用hanging indent的反对margin和方法，它是错误的；text-indent就像渲染相信我正在尝试做其他事情一样。

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;
  margin-left: 3.5em;
}
<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>

标签： htmlcsstext-indent

解决方案

你的dd元素是display: inline——text-indent对那些不起作用。

现在允许使用 s 对术语和描述进行分组div，这样做可以让您通过应用s 来text-indent非常直接地使用悬挂缩进。div我强烈建议hanging现在不要使用该关键字，因为支持它的少数浏览器只有在启用实验性功能的情况下才会这样做。现在，使用填充和负数text-indent来模拟悬挂缩进：

dl dt, dl dd {
  display: inline;
  margin: 0;
}
dl dd::before {
  content: "- ";
}
dl div {
  text-indent: -3.5em;
  padding-top: .25em;
  padding-left: 3.5em;
}
<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>

推荐阅读