Question

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

我正在用木星笔记本书写。可以识别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

在降价促销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：缩进冒号后的第二行

我的尝试

1 个答案: