如何在HTML中实现子子项目符号的正确缩进？

我想要实现三级嵌套有序列表的效果：主列表项下方包含子列表项，子列表项下方再包含子子列表项，且子子列表项能正确缩进。但实际实现的效果和预期不符，以下是我当前的代码：

<body>
    <p>
        <ol>
            <li>
                <u> I am first bullet </u> <br> <br>
                </li>
             <span>1.1 I am a sub bullet</span> <br> <br>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.1.1 I am a sub - sub - bullet for 1.1. I have more points below me. Feel free check out my other siblings. 
                I go more than three to five lines of copy, because i have a lot to express, say, communicate with the audience. I could be lorem ipsum, 
                i could be a story line or i could be a content for educating students, businesses, doctors, lawyers, executives. Lorem ipsum dolor, sit amet 
                consectetur adipisicing elit. Repellat, eaque distinctio. Eaque magni voluptatum, reiciendis mollitia ut doloremque laudantium tenetur sapiente 
                adipisci iure esse numquam temporibus dignissimos laboriosam, laborum excepturi.
                 </span>     
        </ol>
    </p>
</body>

你当前的代码用<span>和手动空格模拟嵌套列表，既不符合HTML语义，也没法正确处理长文本的换行和缩进。正确做法是利用有序列表的嵌套结构，在父级<li>内部嵌套<ol>实现子列表，层级以此类推。

修正后的代码如下：

<body>
    <ol>
        <li>
            <u>I am first bullet</u>
            <!-- 子列表 -->
            <ol>
                <li>
                    I am a sub bullet
                    <!-- 子子列表 -->
                    <ol>
                        <li>I am a sub-sub-bullet for 1.1. I have more points below me. Feel free check out my other siblings. 
I go more than three to five lines of copy, because i have a lot to express, say, communicate with the audience. I could be lorem ipsum, 
i could be a story line or i could be a content for educating students, businesses, doctors, lawyers, executives. Lorem ipsum dolor, sit amet 
consectetur adipisicing elit. Repellat, eaque distinctio. Eaque magni voluptatum, reiciendis mollitia ut doloremque laudantium tenetur sapiente 
adipisci iure esse numquam temporibus dignissimos laboriosam, laborum excepturi.</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</body>

说明 #

1. 每个层级的列表必须放在父级<li>内部，浏览器才能正确识别嵌套关系，自动处理编号和缩进。
2. 无需手动添加编号（比如1.1、1.1.1），浏览器会根据嵌套层级自动生成对应编号格式，若要自定义样式，可通过CSS调整。
3. 去掉了多余的<p>包裹<ol>（不符合HTML规范）和不必要的<br>标签，列表项间距可用CSS控制。

内容的提问来源于stack exchange，提问作者Sathya