更改有序列表上的编号？答案

【问题标题】：Change the numbering on an ordered list?更改有序列表上的编号？
【发布时间】：2009-06-15 07:02:02
【问题描述】：

您可以像这样更改有序列表的起始编号：

<ol start="3">
    <li>item three</li>
    <li>item four</li>
</ol>

...但是有没有办法让列表项具有任意编号，而不仅仅是连续编号？

<ol>
    <li>item two</li>
    <li>item six</li>
    <li>item nine</li>
</ol>

我现在看到的唯一方法是将每个<li> 包装在自己的<ol> 中，这显然不理想。欢迎使用 HTML、Javascript 和 CSS 解决方案。

ps：虽然项目编号是任意的，但它们仍然是有序的，所以不要担心语义

【问题讨论】：

我在下面发布了一个 'hacky' javascript 解决方案，但是，我很好奇，你为什么要做这样的事情？
对于填字游戏线索 - 由于 Down 和 Across 单词被分成不同的列表，因此数字不是连续的。
那你最后做了什么？
将每个 li 包装在自己的 ol 中。就像我说的，它并不理想，但它确实有效。 value 属性本来不错，但我的页面是 XHTML 严格的。 :(
查看我修改后的答案，以防万一……有兴趣知道你的想法。

标签： javascript html css

【解决方案1】：

不推荐使用的 HTML 方式

<ol>
   <li>List item 1</li>
   <li VALUE=5 TYPE="A">List item E</li>
   <li>List item 3</li>
</ol>

CSS way

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
ol { 
    counter-reset:item; 
 }
li {
    display:block; 
 }
li:before { 
    content:counter(item) '. '; 
    counter-increment:item; 
 }
#new_number {
    counter-reset:item 24;
 }
</style>

<!--[if IE]>
<script type="text/javascript">
window.onload=function() {
   document.getElementById('new_number').value='25';
 }
</script>
<![endif]-->

</head>
<body>

<ol>
  <li id="new_number">list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>

</body>
</html>

【讨论】：

注意：value 属性在 HTML4 中已弃用，但在 HTML5 中重新引入。

【解决方案2】：

例如-

<ol id="reverse_numbering">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ol>

这是你可以做的——

<script type="text/javascript">
    var reverse = $('reverse_numbering');
    reverse.style.listStyle='none';
    var li = reverse.getElementsByTagName('li');
    for(var i=0; i<li.length; i++) {
        li[i].insertBefore(document.createTextNode(li.length-i+'. '), li[i].firstChild);
    }
</script>

参考：HTML Help Forums。

【讨论】：

【解决方案3】：

li 上有 value 属性，尽管已弃用：

<ol>
    <li value="2">item two</li>
    <li value="6">item six</li>
    <li value="9">item nine</li>
</ol>

w3schools page for <li.@value> 说：

li元素的value属性在 HTML 4.01 中已弃用，并且是 XHTML 1.0 Strict DTD 不支持。

注意：目前没有CSS value 属性的替代方案。

（尽管在<li> 主页面上对弃用警告说“使用样式”。）

HTML 5 editor's draft reference for li 表明它在那里仍然有效......

【讨论】：

是的，value 仍然存在，并且在 HTML5 中也不再被弃用。

【解决方案4】：

在 HTML 4.01 中，<li> 上有一个已弃用的 value 属性：

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

不推荐使用的 (CSS) 答案（通常）更优雅但不那么......直接:) spec 有点枯燥；谷歌搜索会发现更直接可用的东西，例如this：

就像继续编号一样从上一个列表中，您需要将 CSS 属性设置为递增适当的计数器。但要做到从不同的地方开始递增起点你可以通过可选的第二个参数数字的计数器重置属性。所以从 5 开始看起来有点像在你的 CSS 中像这样：
ol.continue {
  counter-reset: chapter 4;     /* Resets counter to 4. */
}
因为计数器总是会被重置在它增加之前，开始我们的列出数字 5 我们将不得不将计数器设置为 4。

【讨论】：

那么使用该 CSS 选项，是否需要将非连续项目包装在它们自己的 OL 中？
这个例子并不完全相关。您可以根据需要将规则更改为 ol li.myclass。
HTML5 实际上再次允许@value，因为它实际上不是一个表示属性。

【解决方案5】：

看着所有这些答案让我觉得有点恶心。你真的要为此使用 LI 吗？如果这意味着创建“虚拟”lis、javascript 或自定义 CSS 类，我会开始寻找其他可能性。 LI（在我看来）的重点不是自己管理编号。如果您必须自己管理数字，那么您只是使用 LI 来管理样式 - 创建自己的样式并将您的数字粘贴在中怎么样？

【讨论】：

@nickf，对不起，我改变了答案。我相信您的评论仍然有效，但您可能不会！
感谢您在这个问题上花费额外的时间。您提出了一个很好的观点 - 这种情况与使用列表的原始语义目的有所不同。不过，我特别想使用 OL 的原因是为了便于造型。所有边距都已设置并正常工作。使用 div 来伪造列表样式位置之类的东西不是我的乐趣。

【解决方案6】：

实际上比你想象的还要容易。您所做的基本上是“暂停”列表，以便您可以插入一些东西。当您在文本中执行此操作时，您使用&lt;div&gt; 标记。（钟声响起？”）

CSS

...<br />

/* This style removes the indentation that &lt;ol&gt; creates. In my document it was 30pt */<br />
.pauselist {margin-left:-30pt;}
<br />
<br />
XHTML<br />
...<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;ol&gt;<br />
  &lt;li&gt;Item 1&lt;/li&gt;<br />
  &lt;li&gt;Item 2<br />
    &lt;div class="pauselist"&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;!-- Okay now let's continue with the list --&gt;<br /> 
    &lt;/div&gt;<br />
  &lt;/li&gt;<br />
  &lt;li&gt;Item 3&lt;/li&gt;<br />
  &lt;li&gt;Item 4&lt;/li&gt;<br />
&lt;/ol&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
&lt;p&gt;Text&lt;/p&gt;<br />
<br />
<pre>

------ 结果--------- 文本文字

项目 1
第 2 项

文字文本文字

项目 3
第 4 项

文字文本

【讨论】：

这有点老套，甚至不能解决问题（列表可能是这样的：Item 2, Item 4, Item 9）

【解决方案7】：

我认为这个问题从语义开始（你知道，这是创建基于标准的页面的支柱之一）：您想使用有序列表来表示无序一个。

我的建议：

1) 使用 ul 并根据类添加带有数字的图像（这可以通过编程方式完成，您只需生成一次数字图像，此外它还为您提供样式选项）

2) 使用定义列表。我知道它的拉伸语义一点，但如果“术语”（dt）是“水平的”并且定义（dd）是填字游戏的选项，我认为它变成了语义。使用它，您可以添加您想要的数字并使用您喜欢的任何标签来设置它们的样式。

希望这会有所帮助。

【讨论】：

我不同意这个列表是无序的。它是按升序排列的，列表中的第五项是拼图中的第五个水平或垂直单词。只是每个单词的个数不连续。
嗯，我最初并没有理解这一点，所以我坚持纠正:) 我一直在思考这个问题，我认为使用
将是最“可降解的”。它在语义上是合理的，它会显示任何用户代理或浏览器（支持或不支持javascript）都可以访问和理解内容......缺点是如果列表是手动生成的。