Изменить нумерацию в упорядоченном списке?

Вы можете изменить количество, при котором упорядоченный списке начинается так:Изменить нумерацию в упорядоченном списке?

<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 приветствуется.

пс: хотя номера позиций произвольны, они по-прежнему упорядочены, так что не разъедающий о семантике

источник

2009-06-15 nickf

Я разместил 'Hacky' JavaScript решение ниже, но мне интересно, почему вы хотите сделать что-то вроде этого? – Kirtan

Для кроссвордов - поскольку слова Down и Across разделены на разные списки, цифры не являются последовательными. – nickf

Так что же вы сделали в итоге? – Benjol

Там в атрибут livalue, хотя это не рекомендуется:

<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]> говорит:

Атрибут value элемента li устарел в HTML 4.01 и не поддерживается в XHTML 1.0 Strict DTD.

Примечание: На данный момент нет альтернативы для атрибута value CSS .

(Несмотря говоря, «стили использования» для предупреждения устаревания на главной странице <li>.)

HTML 5 editor's draft reference for li предположить, что он по-прежнему действует там ...

источник

2009-06-15 07:06:00

Да, 'значение' все еще существует, и оно также больше не устарело в HTML5. –

В 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 для приращения правильного счетчика. Но сделать это начать приращение с другой отправной точкой вы можете передать необязательный второй параметр в counter-reset свойство числа. Так , начиная с 5 будет выглядеть , как это в вашем CSS:
ol.continue { 
    counter-reset: chapter 4;  /* Resets counter to 4. */ 
} 
Поскольку счетчик всегда сбрасывается до того, как увеличивается, чтобы начать наш список с номером 5, мы должны набор счетчик 4.

источник

2009-06-15 07:06:19 AakashM

так что с этим вариантом CSS, который потребовали бы, чтобы не последовательные элементы были обернуты в их собственный OL? – nickf

Пример не совсем уместен. Вы можете изменить правило на 'ol li.myclass' для своих целей. –

HTML5 фактически разрешает @value снова, потому что это , фактически, не является атрибутом презентации. – Ms2ger

Глядя на все эти ответы, я чувствую себя немного нехорошо. Вы действительно хотите использовать LI для этого? Если это означает создание «фиктивного» lis, javascript или пользовательских классов CSS, я бы начал искать другие возможности. Точка LI (на мой взгляд) НЕ управляет нумерацией. Если вам нужно самостоятельно управлять номерами, вы используете только LI для управления стилем - как создать собственный стиль и просто придерживаться своих номеров в < span> или что-то в этом роде?

источник

2009-06-15 07:07:10 Benjol

Это на самом деле не то, что безумно .... – nickf

@nickf , извините, я сменил свой ответ. Я считаю, что ваш комментарий по-прежнему действителен, но вы не можете! – Benjol

спасибо за дополнительное время по этому вопросу. Вы делаете хороший момент - ситуация h как отчасти отличается от первоначальной смысловой цели использования списка. Причина, по которой я особенно хочу использовать OL, заключается в простоте стилизации. Все поля настроены и работают. Похищение вещей, таких как позиция в стиле списка, с помощью divs - это не мое представление о веселии. – nickf

Устаревшее 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

Примечание: атрибут 'value' был устаревшим в HTML4, но повторно введен в HTML5. – BaSsGaz

Например -

<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) Используйте мкл и добавить изображения с номерами на основе классов (это может быть сделано программно, и у вас есть только для создания цифровых изображений один раз, плюс это дает вам опцию стиля)

2) Используйте список определений. Я немного знаю его семантику растяжения, но если «term» (dt) «Горизонтальный», а определения (dd) - это варианты кроссворда, я думаю, что он становится семантическим. С помощью этого вы можете добавить нужные вам номера и стилизовать их, используя любой тег, который вам нравится.

Надеюсь, это поможет.

источник

2009-06-15 08:59:49 jluna

Я не согласен, что список неупорядочен. Он находится в порядке возрастания, а пятый элемент в списке - пятое горизонтальное или вертикальное слово в головоломке. Просто количество каждого слова не последовательное. – nickf

Mmmh Я не понял это изначально, поэтому я стою исправленным :) Я все время думал о проблеме, и я думаю, что переход с

будет самым «разлагаемым». Это было бы семантически здорово, и он показал бы, что контент будет доступным и понятным для любого пользовательского агента или браузера (с поддержкой javascript или нет) ... недостатком является то, что список создается вручную. – 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

Это более чем немного взломанно и даже не решает проблему (где список может выглядеть следующим образом: «Пункт 2, Пункт 4, Пункт 9») – nickf

Семантически это плохо. – djskinner

Изменить нумерацию в упорядоченном списке?

ответ

Смежные вопросы