html - HTML - 如何将标题放在有序列表的中间？

Question

我正在尝试做的事情：

Header1:
1. xxx
2. xxx
3. xxx
4. xxx

Header2:
5. xxx
6. xxx
7. xxx
8. xxx

我知道我可以拆分列表并在第二部分使用“开始”属性，但它不会验证 HTML4。

有没有可以验证的解决方案？

Answer 1

如果start属性在 HTML4 中无效，请改用 HTML5！

使用单个列表，也许您可​​以使用 css::before和破解它content，但是您的标题不会（语义上）是标题。而且 HTML 是语义的，所以如果你有一个标题，它必须是一个标题元素，而不仅仅是样式为标题的文本。

编辑

好吧，我找到了一种不丢失语义的方法。如果你想要它，请参阅我的其他答案。但我认为无论如何你都应该使用 HTML5。

Answer 2

演示：http: //jsfiddle.net/M4hHH/4/

HTML：

<h1>Header 1</h1>
<ol id="list1">
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>
<h2>Header 2</h2>
<ol id="list2">
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>

CSS：

#list1, #list2{
    list-style: none;
    padding: 0;
}
#list1 { counter-reset: item }
#list2 { counter-reset: item 4 }

#list1 > li:before, #list2 > li:before {
    content: counter(item) ". ";
    white-space: pre-wrap;
    counter-increment: item;
    display:inline-block;
    width: 2em;
    text-align:right;
}

Answer 3

你试过这个吗？

小提琴链接

<ol>

<h1>Header 1</h1>

    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>

<h2>Header 2</h2>

    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>