左对齐 ol 数字与同一“列”中的标题

【问题标题】：Left align ol numbers with the heading in the same “column”左对齐 ol 数字与同一“列”中的标题
【发布时间】：2016-01-18 03:05:21
【问题描述】：

为简单起见，我将所有内容都放在了 HTML 部分：

<section style="text-align:center;">
  <h3>FRUITS</h3>
  <ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ol>
</section>

如何让ol的每一个数字都被同一个“列”对齐？

我想得到这个：

FRUITS
1. Apples
2. Bananas
3. Oranges

【问题讨论】：

标签： html css list alignment html-lists

【解决方案1】：

列表编号与标题左对齐。

body {
    text-align: center;
}
section {
    display: inline-block;
    text-align: left;
}
ol {
    list-style: none;
    padding: 0;
}
ol li {
    counter-increment: step-counter;
}
ol li:before {
    content: counter(step-counter)". ";
}

<section>
    <h3>FRUITS</h3>
    <ol>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Oranges</li>
    </ol>
</section>

【讨论】：

非常聪明！非常感谢，这对我很有帮助。