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

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

18 голосов
/ 15 июня 2009

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

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

18 голосов
/ 15 июня 2009

В 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) ответ (как это часто бывает) более изящен, но менее ... прям: поиск в Google приводит к появлению более полезных материалов, таких как this :

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

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

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

13 голосов
/ 15 июня 2009

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

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

Страница w3schools для <li.@value> гласит:

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

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

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

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

6 голосов
/ 15 июня 2009

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

3 голосов
/ 15 июня 2009

Устаревший способ 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>
2 голосов
/ 15 июня 2009

Например - 

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

1 голос
/ 04 октября 2010

Это даже проще, чем вы думаете. То, что вы делаете, в основном «приостанавливает» список, чтобы вы могли что-то вставить. Когда вы делаете это в тексте, вы используете тег &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

Текст Текст

0 голосов
/ 15 июня 2009

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...