如何格式化我的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;
}