css - 在wordpress中自动延续有序列表

Question

我想创建一个有序列表，打破它(即写一些段落)，然后从我离开的数字继续相同的有序列表。像这样的事情:

List starts here:

1. Item 1
2. Item 2

This line is not a part of the ordered list.

3. Item 3
4. Item 4
5. Item 5

经过研究，我尝试了很多方法。我发现有趣的其中之一是:

List starts here:

    <ol class="begin">
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>

    This line is not a part of the ordered list.
    <ol class="continue">
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

但这对我不起作用。这是我在 WordPress 中发布此代码时得到的输出:

有什么方法可以继续 html 中先前的有序列表吗？ 我想在不使用 start="n"标签的情况下自动继续排序列表。

Answer 1

使用<ol start="3">实现您正在寻找的目标。

例如，

代码:

<ol class="begin">
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>

    This line is not a part of the ordered list.
    <ol class="continue" start="3">
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

直播: Demo link

希望这有帮助。

编辑:

如果你不想硬编码，那么你可以按照下面的方式进行。

代码:

<ol class="begin">
        <li>Item 1</li>
        <li>Item 2
        <p>
        This line is not a part of the ordered list.
        </p>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

直播: Demo link 2

以防万一，如果您想要p要超出数字缩进，那么您需要声明 text-indent具有相应的缩进值。

直播: Demo - 3

此外，如果您希望将其保留在 DOM 内并且不会因小屏幕而中断，请使用以下代码。

.indent-p {
   margin-left: -40px;
}

直播: Demo - 4