Is it possible to specify a starting number for an ordered list?

前端未结

关注

 10  2207

I have a ordered list where I would like the initial number to be 6. I found that this was supported (now deprecated) in HTML 4.01. In this specification they say that you c

相关标签:

10条回答

长发绾君心

2020-12-02 16:40
As others suggested, one can use start attribute of ol element.

Alternatively, one can use value attribute of li element. Both attributes are marked as deprecated in HTML 4.01, but not in HTML 5 (ol and li).
```
<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

遇见更好的自我

2020-12-02 16:41

In case the lists are nested, there has to be a handling leaving out the nested list items, which I accomplished by verifying that the grand parent is not a list item.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

0 讨论(0)

忘了有多久

2020-12-02 16:41

Obviously neither @start of an ordered list <ol> nor @value of a list item <li> can be set via CSS. See https://www.w3schools.com/css/css_list.asp

Replacing the numbering by a counter in CSS seems to be the best/fastest/foolproof solution and there are others promoting it, e.g. https://css-tricks.com/numbering-in-style/

With pure JavaScript it is possible to set @value of each list item, but this is of course slower than CSS. It is not even required to check if the list item belongs to an ordered list <ol>, because unordered lists are left out automatically.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

0 讨论(0)

无人共我

2020-12-02 16:46
start="number" sucks because it doesn't automatically change based on the numbering before it.

Another way to do this that may fit more complicated needs is to use counter-reset and counter-increment.

Problem

Say you wanted something like this:
```
1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four
```
You could set start="3" on the third li of the second ol, but now you'll need to change it every time you add an item to the first ol

Solution

First, let's clear the formatting of our current numbering.
```
ol {
  list-style: none;
}
```
We'll have each li show the counter
```
ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}
```
Now we just need to make sure the counter resets only on the first ol instead of each one.
```
ol:first-of-type {
  counter-reset: mycounter;
}
```
Demo

http://codepen.io/ajkochanowicz/pen/mJeNwY

Now I can add as many items to either list and numbering will be preserved.
```
1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

温柔的废话

2020-12-02 16:50

With CSS it is a bit tricky to cover the case that there are nested list items, thus only the first list level gets the custom numbering that does not interupt with each new ordered list. I'm using CSS combinator '>' to define the possible paths to the list items that shall get a custom numbering. See https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

0 讨论(0)

花落未央

2020-12-02 16:55
I'm surprised that I wasn't able to find the answer in this thread.

I have found this source, which I have summarised below:

To set the start attribute for an ordered list using CSS instead of HTML, you can use the counter-increment property as follows:
```
ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }
```
counter-increment seems to be 0-indexed, so to get a list that starts at 4, use 3.

For the following HTML
```
<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>
```
My result is
```
d) Buy milk
e) Feed the dog
f) Drink coffee
```
Check out my fiddle

See also the W3 wiki reference
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页