Html 如何在文本顶部设置ol列表编号？

我有一个包含有序列表元素的简单部分，我希望数字位于文本顶部，而不是默认的左对齐

我想得到

这里是html

<section class="info-section">
  <div class="main-info">
    <h2>Nature from air</h2>
    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
    <ol class="info-list">
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
    </ol>
  </div>
</section>

下面是一个例子：

---

我需要在代码中更改什么才能获得预期的结果

您可以使用以下CSS：

ol>li::before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    top: -3em;
    left: 50%;
    box-sizing: border-box;
    width: 54px;
    border-radius: 50%;
    margin-left: -27px; //middle of the width
    padding: 17px;
    border: 1px solid rgb(63, 78, 118);
    background: #fff;
    font-weight: bold;
    font-family: proximaNova;
    text-align: center;
}

---

您所需要做的就是更改的left和top属性

李：以前{

你会得到预期的结果

根据您的要求设置左侧和顶部属性

.main信息{
背景图像：url（“https://preview.ibb.co/hZw69K/drone.png");
背景位置：右中；
背景重复：无重复；
}
ol{
列数：2；
计数器复位：li；
}
ol>li{
位置：相对位置；
列表样式：无；
显示：内联块；
垂直对齐：顶部；
利润率：21px 0 57px 2米；
填充：22px41px；
}
李：以前{
内容：柜台（李）；
反增量：李；
位置：绝对位置；
顶部：-30px；
左：25%；
框大小：边框框；
宽度：54px；
高度：54px；
边界半径：50%；
右边距：8px；
填充：17px；
边框：1px实心rgb（63、78、118）；
背景：#fff；
字体大小：粗体；
字体系列：proximaNova；
文本对齐：居中；
}

空气中的自然
Mauris consequat libero metus，nec ultricies sem Efficitiur quis。整型bibendum eget metus ac accumsan。整型sit amet lacus egestas，semper est quis，viverra ex

这是一个由发酵剂和发酵剂组成的工厂。它是一个临时工厂，是一个玉米粥厂，是一个啤酒厂
这是一个由发酵剂和发酵剂组成的工厂。它是一个临时工厂，是一个玉米粥厂，是一个啤酒厂
这是一个由发酵剂和发酵剂组成的工厂。它是一个临时工厂，是一个玉米粥厂，是一个啤酒厂
这是一个由发酵剂和发酵剂组成的工厂。它是一个临时工厂，是一个玉米粥厂，是一个啤酒厂
这是一个由发酵剂和发酵剂组成的工厂。它是一个临时工厂，是一个玉米粥厂，是一个啤酒厂

我已经用css解决了您的问题。

请参考下面的链接。

---

希望你至少尝试自己编写代码。我建议你做一些，或者通过谷歌或搜索SO，尝试一下。如果你仍然有问题，请返回代码并解释你尝试了什么。虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，则仅链接的答案可能无效。

ol>li::before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    top: -3em;
    left: 50%;
    box-sizing: border-box;
    width: 54px;
    border-radius: 50%;
    margin-left: -27px; //middle of the width
    padding: 17px;
    border: 1px solid rgb(63, 78, 118);
    background: #fff;
    font-weight: bold;
    font-family: proximaNova;
    text-align: center;
}

.main-info {
  background-image: url("https://preview.ibb.co/hZw69K/drone.png");
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  column-count: 2;
  counter-reset: li;
}

ol>li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin: 60px 0 57px 2em;
  padding: 22px 41px;
}

ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -54px;;
  left: 50%;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}