如何更改有序列表中的编号?

21

您可以通过以下方式更改有序列表的起始数字:

<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解决方案,但是,我很好奇,你为什么想要做这样的事情呢? - Kirtan
对于填字游戏的提示 - 由于垂直和水平单词被分成不同的列表,数字并不是连续的。 - nickf
你最终做了什么? - Benjol
每个li都包裹在自己的ol中。就像我说的那样,这并不理想,但它能用。value属性本来是个好选择,但我的页面是符合XHTML严格规范的,所以不能用。 :( - nickf
请查看我修订后的答案,以防万一...很想知道你的想法。 - Benjol
7个回答

18

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)非废弃答案通常更加优雅但不太直接 :) 该规范相对枯燥;搜索可以找到更实用的内容,例如这里

与前一个列表继续编号一样,您需要设置CSS属性来增加适当的计数器。但是,为了使它从不同的起始点开始增加,您可以在数字的counter-reset属性中传递一个可选的第二个参数。 因此,从5开始将在您的CSS中看起来像这样:

ol.continue {
  counter-reset: chapter 4;     /* Resets counter to 4. */
}

由于计数器在增加之前总是会被重置,因此要想以数字5开始我们的列表,我们需要将计数器设置为4。


那么,使用CSS选项需要将非顺序项目包装在它们自己的OL中? - nickf
这个例子并不完全相关。你可以根据你的需求将规则改为 ol li.myclass - Alan Plum
7
HTML5实际上再次允许使用@value,因为它实际上不是一种表现属性。 - Ms2ger

13

在 li 元素上有一个 value 属性,尽管它已经被弃用了:

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

w3schools关于<li.@value>的页面表示:

在HTML 4.01中,li元素的value属性已被弃用,在XHTML 1.0 Strict DTD中也不再支持。

注意: 目前,没有CSS替代value属性。

(即使在主<li>页面上,弃用警告中说“使用样式”.)

HTML 5编辑器草案参考li元素表明它仍然有效...


4
是的,value仍然存在,并且在HTML5中也不再被弃用。 - Alexis King

6

看到所有这些回答让我感觉有点不舒服。你真的真的想要使用LIs吗?如果这意味着创建“虚拟”LI、JavaScript或自定义CSS类,我会开始寻找其他可能性。在我看来,LI的重点不是自己管理编号。如果必须自己管理编号,那么你只是使用LI来管理样式-为什么不创建自己的样式并将数字放在<span>中呢?


@nickf,抱歉我改变了我的答案。我认为你的评论仍然有效,但是你可能不这样认为! - Benjol
感谢您在这个问题上花费了额外的时间。您提出了一个很好的观点——情况与使用列表的原始语义目的有些分歧。然而,我特别想使用有序列表是因为它易于进行样式设置。所有的边距都已经设置好并且正常工作。使用 div 等方式来调整列表样式并不是我的乐趣所在。 - nickf

4

已弃用的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>

1
注意:value 属性在 HTML4 中已被弃用,但在 HTML5 中重新引入。 - BaSsGaz

3
例如 -
<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帮助论坛。
注:本文与HTML Help Forums相关。

1

实际上,这比你想象的还要容易。你所做的基本上是“暂停”一个列表,以便插入某些内容。在文本中执行此操作时,使用&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. 项目1
  2. 项目2

文本 文本 文本

  1. 项目3
  2. 项目4

文本 文本


这种方法有些不太正规,而且并不能解决问题(例如列表可能是这样的:项目2,项目4,项目9)。 - nickf

0

我认为这个问题始于语义(你知道,这是创建基于标准的页面的支柱之一):您想使用有序列表来表示一个无序列表。

我的建议:

1)使用ul,并根据类别添加带有数字的图像(可以通过编程完成,您只需生成一次数字图像,而且它还提供了样式选项)

2)使用定义列表。我知道这有点牵强附会,但如果“术语”(dt)是“水平的”,而定义(dd)是填字游戏的选项,我认为它变得更加语义化。使用此方法,您可以添加所需的数字,并使用任何您喜欢的标签进行样式设置。

希望这可以帮助到您。


1
我不同意列表是无序的。它是按升序排列的,列表中的第五个项目是谜题中第五个水平或垂直单词。只是每个单词的编号不是连续的。 - nickf
嗯,我最初没有理解这一点,所以我改正了 :) 我一直在考虑这个问题,我认为使用<dl>标签可能是最“降级”的选择。它在语义上是正确的,并且可以显示内容对于任何用户代理或浏览器(无论是否支持JavaScript)都是可访问和可理解的...缺点是如果列表是手动生成的。 - jluna

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接