css - 如何使用 CSS 设置样式定义列表以创建带有每个条目的悬挂缩进的单个段落？

Question

我正在使用 Pandoc 将 LaTeX 转换为 HTML。它将 LaTeX description 环境翻译成 HTML 定义列表，如下所示:

<dl>
<dt>term:</dt>
<dd><p>definition may be very long and, when viewed online, span multiple lines</p></dd>
</dl>

标准外观是:

term:
    definition may be very long and, when viewed
    online, span multiple lines

我想得到:

term: definition may be very long and, when viewed
  online, span multiple lines

即，将术语和定义显示为带有悬挂缩进的单个段落。我需要什么 CSS 来实现这个目标？ (我目前使用的是 Bootstrap 3.3.7，因此特别欢迎在其之上很好地分层的东西，以及将术语设置为粗体的东西。)

Answer 1

这样就可以了。 (编辑以清除行并在元素之间添加间距)

<section class="latex-list">
  <dl>
    <dt>term:</dt>
      <dd><p>definition may be very long and, when viewed online, span multiple lines</p></dd>
    <dt>term:</dt>
      <dd><p>definition may be very long and, when viewed online, span multiple lines</p></dd>
    <dt>term:</dt>
      <dd><p>definition may be very long and, when viewed online, span multiple lines</p></dd>
  </dl>
</section>

<p> 上的样式会在其他地方引起问题，因此您希望将此名称限定为类。您可以更改 latex-list任何你想要的东西，但我假设你不能自己把它放在 list 上。

.latex-list dl {
  padding-left: 16px;
}

.latex-list dt {
  clear: left;
  float: left;
  margin: 0 2px 0 0;
}

.latex-list dd::after {
  content: "";
  display: block;
  height: 16px;
}

.latex-list dd,
.latex-list p {
  display: inline;
  margin: 0;
  padding: 0;
}

.latex-list dt {
  margin-left: -16px;
}