为了简单起见,我把所有内容都放在HTML部分:
<section style="text-align:center;">
<h3>FRUITS</h3>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
</section>
如何使ol
的每个数字由相同的"列"对齐?
我想要这个:
FRUITS
1. Apples
2. Bananas
3. Oranges
为左对齐列表编号与标题。
body {
text-align: center;
}
section {
display: inline-block;
text-align: left;
}
ol {
list-style: none;
padding: 0;
}
ol li {
counter-increment: step-counter;
}
ol li:before {
content: counter(step-counter)". ";
}
<section>
<h3>FRUITS</h3>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
</section>