markdown / html: 冒号后第二行保持缩进

Question

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

我正在 Jupiter 笔记本 中写作。可以识别 Markdown 语法和 html。我不确定如何让 css 工作？

我在这里看到了一些非常相关的问题，但他们的回答对我不起作用。如：如何通过 CSS?

保持有序列表中第二行的缩进

我的尝试

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

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

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

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

Answer 1

在降价中使用 div 标签 inlinehtml。

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

markdown / html: 冒号后第二行保持缩进

markdown / html: keep indent for second line after colon

html

markdown

auto-indent

jupyter-notebook

我的尝试