Question

我正在尝试做什么：

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

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

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

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

Answer 1

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

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

修改

好吧，我找到了一种不丢失语义的方法。如果需要，请参阅my other answer。但我认为你应该使用HTML5。

Answer 2

DEMO ：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

你试过这个吗？

fiddle link

<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>

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

3 个答案: