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

Question

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

＆＃13;

＆＃13;

ol

＆＃13;

＆＃13;

＆＃13;

如何使FRUITS 1. Apples 2. Bananas 3. Oranges 的每个数字都按照＃34;列排列＆＃34;？

我想得到这个：

{{1}}

Answer 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>