html - 有序列表 css 和小节

Question

我正在尝试创建一个有序列表，其中包含小节和 css-ing，如下图所示。

但到目前为止，我只设法得到这个(下面的下一张图片)，它现在有数字，但它们是对齐的。

到目前为止，这是我的代码:

<style>
    body{
        width: 500px;
        font-family: helvetica;
        font-size: 12px;
        counter-reset:section;
    }

    OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, ".") " "; counter-increment: item }
    p{
        display:inline-block;
        width: 400px;
    }

</style>

<ol>
  <li>
    <strong>The Card</strong>
    <ol>
        <li><p>When you receive your Card, you will receive a PUK and you must choose a PIN.</p></li>
        <li><p>You must either memorise the PIN or keep record of it in a safe place, separate from your Card. Do not tell anyone your PUK or PIN.</p></li>
    </ol>
    </li>
</ol>

Answer 1

尝试像这样修改你的 li 风格:

 OL { margin-left: 0; padding-left: 0; }

然后添加:

 li p { padding-left: 10px; }