Html 有序列表css和子部分

我正在尝试创建一个有序列表，其中包含十进制和css的子部分，如下图所示

但到目前为止，我只得到了这个（下面的下一张图片），它现在有数字，但它们是对齐的

以下是我目前的代码：

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

身体{
宽度：500px；
字体系列：helvetica；
字体大小：12px；
计数器复位：部分；
}
OL{计数器重置：项}
LI{显示：块}
LI:在{content:counters（item，“.”“；计数器增量：item}
p{
显示：内联块；
宽度：400px；
}

卡片
当您收到卡时，您将收到PUK，您必须选择PIN

您必须记住PIN或将其记录在安全的地方，与您的卡分开。不要告诉任何人你的PUK或PIN

尝试如下修改您的li样式：

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

并加上：

 li p { padding-left: 10px; }

---

添加

垂直对齐：顶部到您的
li:before
CSS规则。您可能还需要使用CSS属性，具体取决于您希望对齐元素的方式。
您可以将填充设置为0

li p {padding: 0; display: block;}

如果你想把它推进去一点，你甚至可以和它一起玩

list-style-position: outside/inside/inherit

这就是给我的

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

    OL { 
        counter-reset: item; 
        margin: 0px;
        padding: 0px;
    }
    LI { 
        display: block;

    }
    LI:before { 
        content: counters(item, ".") " "; 
        counter-increment: item ;
        vertical-align: top;
    }
    p{
        display:inline-block;
        width: 400px;
        margin-top: 0px;
        margin-left: 50px;
    }
    strong{
        margin: 0px;
        padding: 0px;
        margin-left: 20px;
    }

    ol li ol{
        margin-top: 20px;
        margin-botom: 20px;
    }


</style>

正文{
宽度：500px；
字体系列：helvetica；
字体大小：12px；
计数器复位：部分；
}
OL{
计数器重置：项目；
边际：0px；
填充：0px；
}
LI{
显示：块；
}
李：在{
内容：计数器（项目“.”）；
反增量：项目；
垂直对齐：顶部；
}
p{
显示：内联块；
宽度：400px；
边际上限：0px；
左边距：50像素；
}
强壮的{
边际：0px；
填充：0px；
左边距：20px；
}
奥利奥{
边缘顶部：20px；
利润率：20px；
}
就这样（完全按照您的意愿）：


CSS
正文{
宽度：500px；
字体系列：helvetica；
字体大小：12px；
计数器复位：部分；
}
奥利奥{
左侧填充：0px；
}
ol li ol li{
左侧填充：20px；
}

HTML

卡片

当您收到卡时，您将收到PUK，您必须选择PIN



您必须记住PIN或将其记录在安全的地方，与您的卡分开。不要告诉任何人你的PUK或PIN



正如您所知：不需要在CSS标记中用大写字母编写元素选择器。您应该只发布相关更改，例如body不相关。而且这看起来是一条路要走，所以接受他的回答才是公平的。