Question

您可以更改有序列表的开头数：

<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：虽然项目编号是任意的，但它们仍然是有序的，所以不要担心语义

Answer 1

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

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

Answer 2

value上有li属性，虽然已弃用：

<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   值属性的替代。

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

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

Answer 3

看着所有这些答案让我觉得有点icky。你真的真的想用LI吗？如果它意味着创建'虚拟'lis，或javascript，或自定义CSS类，我会开始寻找其他可能性。李（在我看来）的观点并不是自己管理编号。如果你必须自己管理数字，那么你只使用LI来管理风格 - 如何创建自己的风格，只需将数字保存在＆lt; span＆gt;中。还是什么？

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

Answer 5

例如 -

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

Answer 6

实际上比你想象的要容易得多。你正在做的是基本上“暂停”一个列表，这样你就可以插入一些东西。在文本中执行此操作时，请使用<div>标记。（贝尔斯现在响了吗？“）

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项

文本文本

Answer 7

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

我的建议：

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

2）使用定义列表。我知道它的拉伸语义有点但是如果“term”（dt）是“Horizontal”而定义（dd）是填字游戏的选项，我认为它变成了语义。使用此功能，您可以添加所需的数字，并使用您喜欢的任何标签设置样式。

希望这有帮助。

更改有序列表上的编号？

7 个答案: