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

Question

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

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

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

我的尝试

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

我使用<pre>标签缩进整个块但我不知道如何删除。（互联网上没有人似乎有这个问题，我开始怀疑是不是因为我在Jupiter笔记本上编码？）
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

在markdown 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：冒号后第二行保持缩进

问题描述投票：0回答：1

我的尝试

1个回答

最新问题

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

问题描述 投票：0回答：1

我的尝试

1个回答

最新问题

问题描述投票：0回答：1