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

编辑：

如果您不想更改标记，可以使用其他选项。

例如使用 a tableandpsuedo元素和 acounter进行编号：

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