更改有序列表上的編號？

您可以更改編號，在這些有序列表一開始是這樣的：更改有序列表上的編號？

<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：雖然項目數是任意的，他們仍然有序，所以不要發愁語義

來源

2009-06-15 nickf

我已經張貼了 '哈克' 的javascript下面的解決方案，但是，我很好奇，你爲什麼要做像這樣？ – Kirtan 2009-06-15 07:13:02

對於縱橫字謎線索 - 由於「下」和「橫」字分爲不同的列表，因此數字不是順序的。 – nickf 2009-06-15 07:25:55

那麼你到底做了什麼？ – Benjol 2009-06-16 05:52:59

有上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 <[email protected]>說：

li元素012的值屬性被廢棄在HTML 4.01，並且是在XHTML 1.0嚴格DTD不受支持。

注意：目前，沒有CSS值替代值的屬性。

（儘管說：「使用樣式」爲主要<li>頁面上棄用警告。）

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

來源

2009-06-15 07:06:00

是的，「價值」仍然存在，並且它也不再在HTML5中棄用 – 2013-07-07 03:05:34

在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）的答案是（正如經常）MO重新優雅，但少...直接:) spec有點幹;谷歌搜索變成了更多立即可用的東西，如this：

就像從前面的列表，您需要繼續編號設置CSS屬性遞增適當的計數器。但要使它開始從不同的起點遞增，你可以在許多計數器復位特性傳遞一個可選的第二個參數。所以從5日開始將看起來像這樣在你的CSS：
ol.continue { 
    counter-reset: chapter 4;  /* Resets counter to 4. */ 
} 
由於遞增前計數器將始終被重置，與5號開始我們名單，我們將不得不集反對4。

來源

2009-06-15 07:06:19 AakashM

所以使用該CSS選項需要將非順序項目包裝在自己的OL中嗎？ – nickf 2009-06-15 07:38:30

看着所有這些答案讓我感到有點噁心。你真的真的想使用LIs嗎？如果它意味着創建'dummy'lis，或者javascript，或者自定義的CSS類，我會開始尋找其他的可能性。 LI（在我看來）的重點不是自己管理編號。如果你必須自己管理數字，那麼你只使用LI來管理風格 - 如何創建自己的風格，並只是將你的數字粘在<範圍內？

來源

2009-06-15 07:07:10 Benjol

已過時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>

來源

2009-06-15 07:07:23

例如 -

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

來源

2009-06-15 07:09:18 Kirtan

我覺得這個問題從語義學（至極，你知道的，是創建基於標準頁的支柱之一）開始：你想使用有序列表來表示無序之一。

我的建議：

1）使用UL和添加具有基於類的數字圖像（這可以通過編程來完成，你只需要一次生成數量的圖像，再加上它爲您提供了更多時尚選擇）

2）使用定義列表。我知道它的拉伸語義有點但是如果「term」（dt）是「Horizontal」並且定義（dd）是縱橫填字的選項，我認爲它變成了語義。使用這個，你可以添加你想要的數字，並使用你喜歡的任何標籤進行設計。

希望這會有所幫助。

來源

2009-06-15 08:59:49 jluna

它實際上比您想象的還要容易。你所做的基本上是「暫停」一個列表，以便插入一些東西。當您在文本中使用<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

文本文本

來源

2010-10-04 18:56:54 SimTech

更改有序列表上的編號？

回答

相關問題