div 内的 html 数字列表？

Question

假设您有两个并排的 div 标签，一个向左浮动，另一个向右浮动。

我想做的是，它只在页面下方左侧的第一个 div 中创建一个数字列表。因此，无论页面或 div 垂直放置多长时间，数字列表都会在那个瘦小的 div 中创建。我附上了它的外观图片。

我在网上搜索过，但我不知道如何向谷歌解释？它提供了我不理解的所有其他内容。有谁知道我该从哪里开始？

Red arrow is what I'm wanting to do

我在 w3school 上发现了这个关于计数器增量的信息，我可以使用它，但是是否可以在不需要将所有这些 h2 标签放在瘦 div 下的情况下完成

Answer 1

实现此效果的一种方法是在标记的末尾添加一个空的有序列表 (<ol>):

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

这<ol>可以绝对定位在视口(viewport)的左侧，而像 <main> 这样的元素(其中包含其余内容)可以给一个margin-left以适应它。

可以将 0 前缀的数字添加到 <ol>使用 content 的组合和 CSS counter()功能。

---

工作示例:

:root {
  color: rgb(0, 191, 0);
  background-color: rgb(0, 0, 0);
}

main {
  margin: 0 42px;
}

h1 {
  margin: 0;
  font-size: 36px;
  line-height: 36px;
}

ol {
  position: absolute;
  top: 12px;
  left: 6px;
  margin: 0;
  padding: 0;
  counter-reset: count;
  list-style-type: none;
  padding-left: 0;
}

li {
  counter-increment: count;
}

li::before {
  content: '00' counter(count, decimal-leading-zero);
}

<main>
<h1>Body Content Here</h1>
<p>The numbers to the left are absolutely positioned.</p>
<p>The main part of your content can go here.</p>
</main>

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

---

进一步阅读:

• https://developer.mozilla.org/en-US/docs/Web/CSS/counter()