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

17

Вы можете изменить номер, с которого начинается упорядоченный список:

<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: хотя номера позиций произвольны, они все еще упорядочены, поэтому не волнуйтесь о семантике

    
задан nickf 15.06.2009 в 09:02
источник
  • Я разместил здесь «хакерское» javascript-решение, но мне любопытно, почему вы хотите сделать что-то подобное? –  Kirtan 15.06.2009 в 09:13
  • Для кроссвордов - поскольку слова Down и Across разделены на разные списки, номера не являются последовательными. –  nickf 15.06.2009 в 09:25
  • Итак, что вы сделали в итоге? –  Benjol 16.06.2009 в 07:52
  • Обернуто каждое ли в собственном ol. Как я уже сказал, это не идеально, но он работает. Атрибут value был бы хорош, но моя страница строго XHTML. :( –  nickf 16.06.2009 в 08:30
  • Посмотрите мой пересмотренный ответ, на всякий случай ... интересно узнать, что вы думаете. –  Benjol 17.06.2009 в 10:37

7 ответов

18

В 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 несколько сухая; googling включает более немедленно используемые материалы, такие как это :

  

Также как продолжение нумерации   из предыдущего списка вам нужно будет   установить свойство CSS для увеличения   соответствующий счетчик. Но сделать это   начать увеличиваться с другого   отправной точкой вы можете пройти   необязательный второй параметр в   counter-reset свойство числа. Так   начиная с 5 будет выглядеть что-то   как это в вашем CSS:

ol.continue {
  counter-reset: chapter 4;     /* Resets counter to 4. */
}
     

Поскольку счетчик всегда будет сброшен   прежде чем он будет увеличен, чтобы начать   список с номером 5, нам придется   установите счетчик на 4.

    
ответ дан AakashM 15.06.2009 в 09:06
источник
  • , так что с этим вариантом CSS, который потребует, чтобы не последовательные элементы были обернуты в их собственный OL? –  nickf 15.06.2009 в 09:38
  • Пример не совсем уместен. Вы можете изменить правило на ol li.myclass для своих целей. –  Alan Plum 15.06.2009 в 11:16
  • HTML5 фактически разрешает @value снова, потому что это, фактически, не атрибут презентации. –  Ms2ger 15.06.2009 в 13:20
  • Вот ссылка на документ HTML5: w3.org/TR/html-markup/li.html –  J. Frankenstein 24.03.2014 в 04:29
13

В value есть атрибут li , хотя это устарело:

<ol>
    <li value="2">item two</li>
    <li value="6">item six</li>
    <li value="9">item nine</li>
</ol>

Страница w3schools для <[email protected]> говорит:

  

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

     

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

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

ссылка на проект редактора HTML 5 для li предполагает, что он все еще действителен там ...

    
ответ дан Jon Skeet 15.06.2009 в 09:06
источник
  • Да, значение все еще существует, и оно также больше не устарело в HTML5. –  Alexis King 07.07.2013 в 05:05
6

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

    
ответ дан Benjol 15.06.2009 в 09:07
источник
  • , на самом деле это не безумие .... –  nickf 15.06.2009 в 09:27
  • @nickf, извините, я изменил свой ответ. Я считаю, что ваш комментарий по-прежнему действителен, но вы не можете! –  Benjol 15.06.2009 в 15:19
  • спасибо за дополнительное время по этому вопросу. Вы делаете хороший момент - ситуация несколько расходится с первоначальной смысловой целью использования списка. Причина, по которой я особенно хочу использовать OL, заключается в простоте стилизации. Все поля настроены и работают. Похищение вещей, таких как позиция в стиле списка, с помощью divs - это не мое представление о веселии. –  nickf 18.06.2009 в 03:07
  • CSS ад, я это хорошо знаю ... –  Benjol 18.06.2009 в 07:30
3

Устаревший способ HTML

<ol>
   <li>List item 1</li>
   <li VALUE=5 TYPE="A">List item E</li>
   <li>List item 3</li>
</ol>

способ CSS

<!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>
    
ответ дан Eugene Yokota 15.06.2009 в 09:07
источник
  • Примечание: атрибут value был устаревшим в HTML4, но повторно введен в HTML5. –  BaSsGaz 18.08.2017 в 22:53
2

Например -

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

    
ответ дан Kirtan 15.06.2009 в 09:09
источник
1

На самом деле это даже проще, чем вы думаете. То, что вы делаете, в основном «приостанавливает» список, чтобы вы могли что-то вставить. Когда вы делаете это в тексте, вы используете тэг &lt;div&gt; . (Белки звонят сейчас? »)

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. Пункт 1
  2. Пункт 2

Текст Текст Текст

  1. Пункт 3
  2. Пункт 4

Текст Текст     

ответ дан SimTech 04.10.2010 в 20:56
источник
  • Это более чем немного взломанно и даже не решает проблему (где список может выглядеть следующим образом: Пункт 2, Пункт 4, Пункт 9) –  nickf 05.10.2010 в 10:03
  • Семантически это плохо. –  djskinner 24.10.2011 в 21:15
0

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

Мои предложения:

1) Используйте ul и добавьте изображения с цифрами на основе классов (это можно сделать программно, и вам нужно только создать число изображений один раз, а также дать вам варианты стилизации)

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

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

    
ответ дан jluna 15.06.2009 в 10:59
источник
  • Я не согласен с тем, что список неупорядочен. Он находится в порядке возрастания, а пятый элемент в списке - пятое горизонтальное или вертикальное слово в головоломке. Просто количество каждого слова не последовательное. –  nickf 15.06.2009 в 14:28
  • Mmmh Я не понял это изначально, поэтому я стою исправлено :) Я все время думал о проблеме, и я думаю, что с <dl> будет самая «разлагаемая». Это было бы семантически здорово, и он показал бы, что контент будет доступным и понятным для любого пользовательского агента или браузера (с поддержкой javascript или нет) ... недостатком является то, что список создается вручную. –  jluna 19.06.2009 в 10:13