[英]Ordered list css and subsections
我正在嘗試創建一個有序列表,其中包含十進制和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>
嘗試修改你的li風格,如下所示:
OL { margin-left: 0; padding-left: 0; }
並添加這個:
li p { padding-left: 10px; }
添加vertical-align: top;
你的li:before
CSS規則li:before
。 您可能還需要使用<p>
margin
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>
你去(完全按照你想要的): JSFiddle
body {
width: 500px;
font-family: helvetica;
font-size: 12px;
counter-reset:section;
}
ol li ol {
padding-left:0px;
}
ol li ol li {
padding-left:20px;
}
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.