左对齐醇数字与标题中相同的“栏” [英] Left align ol numbers with the heading in the same “column”

问题描述

有关简单起见，我已经把一切都在HTML部分：

＆lt;节风格=文本对齐：中心;＆GT;   ＆LT; H3＆GT;水果和LT; / H3＆GT;   ＆LT; OL＆GT;     ＆LT;李＆GT;苹果＆LT; /李＆GT;     ＆LT;李＆GT;香蕉＆LT; /李＆GT;     ＆LT;李＆GT;桔子＆LT; /李＆GT;   ＆LT; / OL＆GT; ＆LT; /节＆gt;

如何让醇的每一个号，发往同一个塔？

对齐

我想获得这样的：

水果 1.苹果 2.香蕉 3.橙子

解决方案

有关只剩下标题对齐列表编号。

体{     文本对齐：中心; } 部分 {     显示：inline-block的;     文本对齐：左; } 醇{     列表样式：无;     填充：0; } OL李{     反增量：步非处方; } OL李：之前{     内容：计数器（步计数器）;。 }

＆lt;节＆GT;     ＆LT; H3＆GT;水果和LT; / H3＆GT;     ＆LT; OL＆GT;         ＆LT;李＆GT;苹果＆LT; /李＆GT;         ＆LT;李＆GT;香蕉＆LT; /李＆GT;         ＆LT;李＆GT;桔子＆LT; /李＆GT;     ＆LT; / OL＆GT; ＆LT; /节＆gt;

For the sake of simplicity, I've put everything in the HTML part:

<section style="text-align:center;">
  <h3>FRUITS</h3>
  <ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ol>
</section>

How to make every number of ol to be aligned by the same "column"?

I would like to get this:

FRUITS
1. Apples
2. Bananas
3. Oranges

解决方案

For left align the list numbers with the heading.

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>

这篇关于左对齐醇数字与标题中相同的“栏”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！