Нумерация HTML/CSS

В html/css я могу достичь этого?

1.
1.1
1.2
2.
2.1
2.2

с использованием тегов LI и UL?

ОТВЕТЫ

Ответ 1

Для браузера, совместимого с CSS2, вы можете использовать

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); }

Ответ 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;
}

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 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; }