我正在尝试创建一个有小节的有序列表,其小节以十进制形式进行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>