如何格式化我的 css 文本，以便结果在 2 列中？

Question

我想在 html 和 css 中重新创建以下文本：

到目前为止，没有css，我在html中写道：

<p><b>noun</b></p>
<p>1. an optical instrument, often attached to the eyepiece of a microscope, by which
the image of an external object is projected on a sheet of paper or
the like for tracing.</p>

但是我怎样才能将 1 和文本的其余部分分开，使其与原始图像保持一致？

Answer 1

使用 ordered list（HTML 元素 ol）

示例如下：

<p><b>noun</b></p>
<ol>
  <li>an optical instrument, often attached to the eyepiece of a microscope, by which
the image of an external object is projected on a sheet of paper or
the like for tracing.
  </li>
</ol>

编辑:

如果您不想更改您的标记，您还可以选择其他选项。

例如使用 table 和 psuedo 元素和 counter 进行编号：

 body {
    counter-reset: counter;
 }
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

<p><b>noun</b>
</p>
<p class="list">an optical instrument, often attached to the eyepiece of a microscope, by which the image of an external object is projected on a sheet of paper or the like for tracing.</p>
<p class="list">an optical instrument, often attached to the eyepiece of a microscope, by which the image of an external object is projected on a sheet of paper or the like for tracing.</p>

Answer 2

正如@kukkuz 所说，您可以使用 ordered list。然后，如果您想获得与您发布的图片完全相同的结果，您可以在 CSS 中更改列表的布局，如下所示：

ol {
  padding-left:1em;
}

li {
  padding-left:1em;
}