更改有序列表上的編號？
[英]Change the numbering on an ordered list?
問題描述
您可以更改有序列表的開頭數，如下所示：
<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：雖然項目編號是任意的，但仍然是有序的，所以不要擔心語義
7 個解決方案
解決方案1
18 2009-06-15 07:06:19
在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。
解決方案2
13 2009-06-15 07:06:00
li上有value屬性，雖然不推薦使用：
<ol>
<li value="2">item two</li>
<li value="6">item six</li>
<li value="9">item nine</li>
</ol>
li元素的value屬性在HTML 4.01中已棄用，在XHTML 1.0 Strict DTD中不受支持。
注意：目前，value屬性沒有CSS替代方案。
（盡管在主<li>頁面上對棄用警告說“使用樣式”。）
HTML 5編輯的li草案參考文獻表明它在那里仍然有效......
解決方案3
6 2009-06-15 07:07:10
看着所有這些答案讓我覺得有點icky。 你真的真的想用LI嗎？ 如果它意味着創建'虛擬'lis，或javascript，或自定義CSS類，我會開始尋找其他可能性。 李（在我看來）的觀點並不是自己管理編號。 如果您必須自己管理數字，那么您只使用LI來管理風格 - 如何創建自己的風格並將數字放在<span>或其他內容中？
解決方案4
3 2009-06-15 07:07:23
棄用的HTML方式
<ol>
<li>List item 1</li>
<li VALUE=5 TYPE="A">List item E</li>
<li>List item 3</li>
</ol>
<!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>
解決方案5
2 2009-06-15 07:09:18
例如 -
<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幫助論壇 。
解決方案6
1 2010-10-04 18:56:54
它實際上比你想象的還要容易。 你正在做的是基本上“暫停”一個列表，這樣你就可以插入一些東西。 在文本中執行此操作時，請使用<div> 標簽。 （貝爾斯現在響了嗎？“）
CSS
...<br />
/* This style removes the indentation that <ol> creates. In my document it was 30pt */<br />
.pauselist {margin-left:-30pt;}
<br />
<br />
XHTML<br />
...<br />
<p>Text</p><br />
<p>Text</p><br />
<ol><br />
<li>Item 1</li><br />
<li>Item 2<br />
<div class="pauselist"><br />
<p>Text</p><br />
<p>Text</p><br />
<p>Text</p><br />
<!-- Okay now let's continue with the list --><br />
</div><br />
</li><br />
<li>Item 3</li><br />
<li>Item 4</li><br />
</ol><br />
<p>Text</p><br />
<p>Text</p><br />
<br />
<pre>
------結果---------文字文字
- 第1項
- 第2項
文本文本文本
- 第3項
- 第4項
文字文字
解決方案7
0 2009-06-15 08:59:49
我認為這個問題從語義開始（你知道，這是創建基於標准的頁面的支柱之一）：你想使用有序列表來表示無序列表。
我的建議：
1）使用ul並根據類添加帶有數字的圖像（這可以以編程方式完成，您只需要生成一次數字圖像，此外它還為您提供樣式選項）
2）使用定義列表。 我知道它的拉伸語義有點但是如果“term”（dt）是“Horizontal”而定義（dd）是填字游戲的選項，我認為它變成了語義。 使用此功能，您可以添加所需的數字，並使用您喜歡的任何標簽對其進行樣式設置。
希望這可以幫助。
如何防止有序列表的編號 <ol> 調整以適應隱藏/取消隱藏的元素
[英]How can I prevent numbering of ordered list <ol> adjust to accommodate hiding / unhiding elemtents
如何訪問有序列表的定位標記並更改JavaScript中的“ href”
[英]How to access a ordered list's anchor tag and change the “href” in JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.