我正在尝试创建一个有序列表,其中包含小节和 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>
最佳答案
尝试像这样修改你的 li 风格:
OL { margin-left: 0; padding-left: 0; }
然后添加:
li p { padding-left: 10px; }
关于html - 有序列表 css 和小节,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17322095/