ruarhyzh-CNcsdanlenfrkadeeliwitjakoestr

Предлагаем широкий спектр веб услуг по разработке, поддержке и продвижению веб-сайтов.
Гарантируем качество и высокий уровень сдаваемых проектов с 2006 года.

В CSS нумерованный список может быть с латинскими и греческими буквами, также с цифрами вкл. римские. Но вот как сделать список с русскими буквами - а) б) в) г) д) е) и т.д. ? - читайте далее:

Это делается через стили CSS 3

HTML:

 

<ol class="cyrilic">
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
</ol>

 

В данном случае можно использовать как и <ol> так и <ul> ведь нумерацию мы принудительно выставим сами с помощью псевдоэлемента ::before и свойства content. Но т.к. в каждой строке должна быть своя буква, используем псевдокласс :nth-child(1), в скобках пишем номер буквы.

CSS 3:

 

.cyrilic li:nth-child(1)::before { content: 'а)'; }
.cyrilic li:nth-child(2)::before { content: 'б)'; }
.cyrilic li:nth-child(3)::before { content: 'в)'; }
.cyrilic li:nth-child(4)::before { content: 'г)'; }
.cyrilic li:nth-child(5)::before { content: 'д)'; }
.cyrilic li:nth-child(6)::before { content: 'и)'; }
.cyrilic li:nth-child(7)::before { content: 'к)'; }
.cyrilic li:nth-child(8)::before { content: 'л)'; }

 

и т.д.

 

Преимущества

Плюсов у данного метода очень много,
1) можно использовать буквы любого алфавита и любые символы вкл. символы utf-8. Также мы сами решаем, включать в список буквы, такие как Ё и Й, или нет.
2) Вид нумерации и оформление букв устанавливается через CSS.
3) Список легко расширить по аналогии и сделать вложенные списки.
4) Можно сделать несколько списков разного вида и применять их в требуемых ситуациях или комбинировать между собой, написав этот код в css файл шаблона.

Поддержка браузеров

Эта технология CSS 3, поэтому старые браузеры вроде IE8 ее не поддерживают. Слава Богу, что уже не нужно писать отдельные строки под IE, а если что и отображается плохо, то это проблема юзера, который использует IE.
В Internet Explorer 9 это уже работает. В остальных нормальных браузерах все хорошо работает, так же как и в iPhone и Android системах.

 


e-mail

All rights reserved. © 2006-2024. При перепечатке текстов, активная, видимая ссылка на TopWebDesign.ru обязательна.

Сайт носит исключительно информационный характер и никакая информация, опубликованная на нём, ни при каких условиях не является публичной офертой, определяемой положениями статьи 437 Гражданского кодекса РФ. Настоящий ресурс может содержать материалы 18+

Продолжая использовать наш сайт, Вы даете согласие на обработку файлов cookies и пользовательских данных, подробнее в нашей Политике Cookie. Если Вы не хотите, чтобы Ваши данные обрабатывались, пожалуйста, покиньте сайт.

Наверх Вниз