Как добиться десятичной нумерации в упорядоченных списках?

Question

Могу ли я добиться этого с помощью HTML и CSS?

1.
1.1
1.2
2.
2.1
2.2

с использованием тегов <li> и <ul>?

Answer 1

Для CSS-совместимых браузеров вы можете использовать:

ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }

Answer 2

Нет кросс-браузерного способа сделать это.

Лучшее, что вы можете достичь - это вложенные упорядоченные списки:

<ol>
    <li>Item 1
        <ol>
            <li>Subitem 1</li>
        </ol>
    </li>
</ol>

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

ol {
    list-style-type: upper-roman;
}
ol ol {
    list-style-type: decimal;
}

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

Answer 3

http://www.w3.org/TR/CSS2/generate.html

Но, да, это только для современных браузеров. Вложенные OL - это, вероятно, путь.

Answer 4

CSS 2.1 предоставляет определяемые пользователем счетчики, которые можно использовать для подсчета элементов. В сочетании с псевдоклассами: before и: after вы можете вывести значение счетчика для создания автоматически пронумерованных заголовков.

К сожалению, по крайней мере Internet Explorer не поддерживает ничего из этого, даже в последней версии. Но, по крайней мере, Firefox поддерживает его очень хорошо, поэтому, если вы просто хотите добавить его в качестве расширения, которое не делает ваш сайт непригодным для использования, если он не поддерживается, вы все равно можете его использовать.

Answer 5

Рассмотрите возможность использования DL / DT / DD вместо OL / UL и жестко закодируйте значения в DT.

Answer 6

Да, это можно сделать с помощью CSS Counters . Однако это работает не во всех браузерах.

Answer 7

Одна строка JavaScript сделает это. Используется в оглавлении:

<td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>

num - это глобальная переменная в документе, инициализированная нулем в соответствующем месте вверх по течению. Выше выдает 1.1 в первой инстанции. Измените на num ++ и получите 1.0.

Answer 8

HTML-код:

<ul>
  <li>1  </li>          
  <li>1.1</li>    
  <li>1.2</li>      
  <li>2  </li>                  
  <li>2.1</li>  
  <li>2.2</li>  
</ul>

Код CSS:

li  {   list-style:none; }