html - CSS |列表项上方单个垂直列中的有序列表

Question

我希望创建一个有序列表(十进制)，其中所有元素都与其数字标题左对齐。例如:

List

1.

This is list item 1

2.

This is list item 2

3.

This is list item 3

我一直在四处寻找，但没有找到任何实现它的方法。我仍然想使用 an，因为它比手动输入数字更好。反正有没有把和列为一个单一的列？

Answer 1

看，CSS 计数器!我在 CSS 中添加了注释来解释解决方案。 This article by Louis Lazaris很好地解释了细节。

.fancy-list {
  margin: 0;
  padding: 0;
  list-style: none; /* hide original list numbering */
  counter-reset: ordered-list; /* initialize CSS counter */
}
.fancy-list li {
  margin-bottom: 12px;
}
.fancy-list li::before {
  display: block; /* display numbering as block to force content down */
  margin-bottom: 4px;
  counter-increment: ordered-list; /* increment CSS counter for every <li> in the list */
  content: counter(ordered-list) "."; /* output counter value and append a "." */
}

<p>This solution has the following benefits:</p>
<ol class="fancy-list">
  <li>does not require superfluous HTML</li>
  <li>maintains semantics of an ordered list</li>
  <li>is flexible; doesn't matter how many items you have</li>
  <li>you don't need to adjust the left margin for list items if you change the list's left margin</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>