Изменить нумерацию в упорядоченном списке?
Вы можете изменить число, с которого начинается упорядоченный список:
<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: хотя номера позиций произвольны, они все еще упорядочены, поэтому не волнуйтесь о семантике
Ответы
Ответ 1
В 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) (как часто) более элегантный, но меньше... прямой:) spec несколько сухой; googling включает более немедленно используемые материалы, такие как this:
Также как продолжение нумерации из предыдущего списка вам нужно будет установить свойство CSS для увеличения соответствующий счетчик. Но сделать это начать увеличиваться с другого отправной точкой вы можете пройти необязательный второй параметр в counter- reset свойство числа. Так начиная с 5 будет выглядеть что-то как это в вашем CSS:
ol.continue {
counter-reset: chapter 4; /* Resets counter to 4. */
}
Поскольку счетчик всегда будет resetпрежде чем он будет увеличен, чтобы начать список с номером 5, нам придется установите счетчик на 4.
Ответ 2
В li присутствует атрибут value, хотя это устарело:
<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 предполагает, что он все еще действует там...
Ответ 3
Глядя на все эти ответы, я чувствую себя немного нехорошо. Вы действительно хотите использовать LI для этого? Если это означает создание 'dummy' lis, javascript или пользовательских классов CSS, я бы начал смотреть на другие возможности. Точка LI (на мой взгляд) НЕ управляет нумерацией. Если вам нужно самостоятельно управлять цифрами, вы используете только LI для управления стилем - как создать собственный стиль и просто придерживаться своих чисел в <span> или что-то?
Ответ 4
Устаревший способ 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>
Ответ 5
Например -
<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
На самом деле это даже проще, чем вы думаете. То, что вы делаете, в основном "приостанавливает" список, чтобы вы могли что-то вставить. Когда вы делаете это в тексте, вы используете тег <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 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>
------ Результаты ---------
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Ответ 7
Я думаю, что эта проблема начинается с семантики (которая, как вы знаете, является одним из столпов создания стандартных страниц): вы хотите использовать упорядоченный список, чтобы представить неупорядоченный.
Мои предложения:
1) Используйте ul и добавьте изображения с цифрами на основе классов (это можно сделать программно, и вам нужно только создать число изображений один раз, а также дать вам варианты стилизации)
2) Используйте список определений. Я знаю его семантику растяжения немного, но если "term" (dt) "Горизонтальный", а определения (dd) - это варианты кроссвордов, я думаю, что он становится семантическим. С помощью этого вы можете добавить нужные вам номера и стилизовать их, используя любой тег, который вам нравится.
Надеюсь, что это поможет.
