markdown / html：冒号后第二行保持缩进答案

【问题标题】：markdown / html: keep indent for second line after colonmarkdown / html：冒号后第二行保持缩进
【发布时间】：2019-01-24 00:16:30
【问题描述】：

任务是将文本放入彩色块中（背景色、填充、圆角、边框线等）。在块内，在示例 2 说明中，第二行应自动保持缩进并在第一行的冒号后对齐。如果我的解释不够清楚，我想要的输出如下图所示。

我在 Jupiter notebook 中写作。可以识别 Markdown 语法和 html。我不确定如何使 css 工作？

我在这里看到了一些非常相关的问题，但他们的答案对我不起作用。如：如何通过CSS保持有序列表第二行的缩进？

我的尝试

我能做的最好的如下所示，但是它有问题。

我使用了<pre> 标签，它缩进了整个块，但我不知道如何删除。（网上好像没有人有这个问题，我开始怀疑是不是因为我在 Jupiter notebook 上写代码？？）
Example 2 中Explanation 的第二行没有与第一行的冒号对齐。

这是一个老问题，经过几个小时的尝试，我几乎放弃了。抱歉更新晚了。

<p><strong>Example 1:</strong></p>
<pre style="background-color:#F5F5F5; padding:10px; border:1px solid #CCCCCC; border-radius:5px;">
<strong>Input:</strong> "42"
<strong>Output:</strong> 42
</pre>

<p><strong>Example 2:</strong></p>
<pre style="background-color:#F5F5F5; padding:10px; border:1px solid #CCCCCC; border-radius:5px;">
<strong>Input:</strong> "   -42"
<strong>Output:</strong> -42
<strong>Explanation:</strong> The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42.
</pre>

【问题讨论】：

请提供一些代码来显示您尝试过的内容。至少，您要设置样式的 HTML（呈现为 HTML 的 Markdown 可能有效，但 HTML 更有用）。屏幕截图可能会传达您想要的内容，但在不了解源文档的结构的情况下，很难提供任何帮助。

标签： html jupyter-notebook markdown auto-indent

【解决方案1】：

在降价inlinehtml中使用div标签。

<div style="clear: both; display: table">
<div style="float: 100px; width: 100px; ">
<strong>Explanation: </strong>
</div> 
<div style="float: left; width: 500px;">
The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42. 
</div>
</div>

您可以在 html 中使用 definition list。

<!DOCTYPE html>
<html>
<head>
<style>
dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  clear: left;
  width: auto;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0;
  font-weight: bold
}
dt::after {
  content: ":";
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0 0 0 10px;
}
</style>
</head>
<body>

<p>A dd element is displayed like this:</p>

<dl>
  <dt>Input</dt> 
  <dd> 42 </dd>

  <dt>Output</dt> 
  <dd> 42 </dd>

  <dt>Explanation</dt>
  <dd>The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42.</dd>
</dl>

<p>Change the default CSS settings to see the effect.</p>

</body>
</html>

【讨论】：

非常感谢！写得很好，但似乎