Нумерованный список. Как разместить элементы списка горизонтально? Тег ul задает нумерованный список

Списки бывают нумерованными и ненумерованными.

Нумерованные списки выводятся кодом:

Список с цифрами
1. пункт 1
2. пункт 2
3. пункт 3

Не нумерованные списки выводятся кодом:

Список с галочками или другими символами
• пункт 1
• пункт 1
• пункт 1

Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.

Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.

Для нумерованного списка прописываются стили нумерации для каждого пункта.

Стандартные арабские цифры описываются значением decimal.

list-style-type: decimal; /*арабские цифры*/

Для маркерованного списка указывается стиль символов — квадратики или кружочки.

list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/

Каждому пункту меню можно назначить изображение.

list-style-image: url(‘путь к изображению’);

Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.

Где стили списков прописаны в шаблоне Twenty Eleven?

Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

Стандартный код выглядит вот так:

Как оформить нумерованный список?

Нумерованный список с использованием фона

Посмотрите вот на такое симпатичное оформление нумерованного списка.

Нравится? Давайте повторим.

Найдите стили для тега ol. Пропишите к нему новые свойства.

Ol { padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index: 2; counter-reset: point; } ol li { margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; } ol li:before { margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #BDC3C7; content: counter(point); text-align: center; position: absolute; font-weight: bold; }

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

list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов

before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта

В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.

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

На одном женском сайте есть очень привлекательные нумерованные списочки.

Как это реализовано? Давайте рассмотрим следующий код:

/*первый номер*/ ol li:first-child { list-style-image: url(путь к изображению с цифрой 1); } /*второй номер*/ ol li:nth-child(2n) { list-style-image: url(путь к изображению с цифрой 2); } /*третий номер*/ ol li:nth-child(3n) { list-style-image: url(путь к изображению с цифрой 3); } /*четвертый номер*/ ol li:nth-child(4n) { list-style-image: url(путь к изображению с цифрой 4); } /*Далее прописываем точно также только для следующих номеров пунктов*/

В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку.

Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).

Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).

Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.

Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.

Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.

Как оформить маркированный (ненумерованный) список?

Маркированный список ul li с чередующимися иконками

Мне очень понравился вот такой маркированный список

Ul { padding: 11px 0 5px 0; } ul li { padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px; } ul li:before { content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; } ul li:nth-child(2n):before { content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px -17px no-repeat; list-style-type: circle; }

Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.

Для эксперимента можно назначить отступы:

Ul li{ list-style-image: url(images/radio.png); margin-left: 30px; }

Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром.

Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента.

Как вывести на странице несколько списков с разным оформлением?

Иногда нужно разместить несколько списков с разными стилями.

Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

Вот, например, один симпатичный вариант оформления содержания:

В HTML вы пропишите список так:

Содержание
1. пункт 1
2. пункт 2
3. пункт 3

В CSS вы пропишите стили так:

Ol#sod{ padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline-block; } ol#sod li{} ol#sod li:before{ font-weight:normal !important }

Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.

Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией.

Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта.

Как создать ссылки-якоря в списке содержания?

Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.

Содержание
1. Заголовок 1
2. Заголовок 2
3. Заголовок 3

А в тексте статьи нужно написать так:

Заголовок 1… Заголовок 2… Заголовок 3…

Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама.

Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях.

Агеева Вероника.

Возможно вас еще заинтересует:

Если решили изменить стандартные списки ul и li, то это тема вам будет интересно. Так как здесь узнаете несколько оригинальных решений. Которые вам безусловно помогут изменить стандартный вид на уникальный, где идет стилистика CSS, для оформления списков. Плюс в том, что мы будем использовать во всем, только один класс, который кардинально изменит вид. В дополнение к этим параметрам вы можете указать, на каком номере должен начинаться список, здесь все можно сделать самостоятельно. Начальное значение по умолчанию для пронумерованных списков находится на первом или буква A.

Исходя из основ, мы теперь более подробно рассмотрим элементы, используемые для обеспечения структуры и значения для различных частей дизайн. Если кто не знает, то ul и li, это гораздо лучший вариант, чем простой текстовый текст, потому что, когда текст обертывается, особенно в мобильном телефоне, он отлично отступы и не обтекает маркер.

Считается, что списки, это отличный способ изложения информации на страницах, потому что они просты для чтения и выглядят хорошо. Многие люди, похоже, думают, что точки пули, это маленькие изображения, но на самом деле все они созданы через довольно простой HTML код. Вы можете вставлять разные типы списков друг в друга, если хотите, просто не забудьте закрыть их правильно. Вы можете играть с текстом, который вы хотите, во всех этих командах списка.

Также нужно знать, что списки изначально содержат несколько элементов:

1 . Неупорядоченная информация.
2 . Упорядоченная информация.
3 . Определения.

Приступаем к установке:

1. Вариант:

• Элемент списка


• Уникальный список


• Оригинальные списки


• ZORNET.RU - Вебмастеру


• Еще один список

CSS

Ksangelopan {
margin: 19px 0 0;
padding:0;
list-style: none;
counter-reset: li;
}
.ksangelopan li {
border: 2px solid #3575ad;
background: #d7dee4;
position: relative;
margin-bottom: 17px;
padding: 15px 9px;
}
.ksangelopan li:hover {
z-index: 1;
}
.ksangelopan li:before {
border: 2px solid #2270b3;
position: absolute;
top: -14px;
padding: 3px 9px;
font-size: 11px;
font-weight: bold;
color: #246eaf;
background: #f2f4f7;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.ksangelopan li:hover:before {
background: #2672b3;
color: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transform: translate(-11px, 0);
transform: translate(-11px, 0);
}
.ksangelopan li:after {
content: "";
position: absolute;
transition-duration: 0.3s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #FFF;
height: 100%;
left: 0;
top: 0;
width: 0;
}
.ksangelopan li:hover:after {
width: 100%;
}

На этом вся установка.

2 Второй вариант:

• Элемент списка


• Уникальный список


• Оригинальные списки


• ZORNET.RU - Вебмастеру


• Еще один список

CSS

Beleduzlopamges {
margin-bottom: 8px;
padding:0;
list-style: none;
counter-reset: li;
}
.beleduzlopamges li {
position: relative;
border: 2px solid #195588;
background: #eff3f7;
padding: 15px 19px 15px 27px;
margin: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.beleduzlopamges li:hover {
background: #FFF;
}
.beleduzlopamges li:before {
line-height: 32px;
position: absolute;
top: 4px;
left: -39px;
width: 39px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #f9f5f5;
background: #275b88;
counter-increment: li;
content: counter(li);
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:before {
width:46px;
}
.beleduzlopamges li:after {
position: absolute;
left: 0;
top: 4px;
content: "";
height: 0;
width: 0;
border: 16px solid transparent;
border-left-color: #275b88;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:after {
margin-left: 6px;
}

Центровую гамму можно самостоятельно выставить под основной стиль сайта.

3 Третий вариант:

• Скрипты для uCoz


• Шаблоны для uCoz


• Дизайн для сайта


• Стили для сайта


• Стилистика на CSS

CSS

Nizualisanelag {
padding:0;
list-style: none;
counter-reset: li;
}
.nizualisanelag li {
position: relative;
padding: 9px 17px 17px 25px;
margin-left: 39px;
transition-duration: 0.2s;
cursor: pointer;
font-weight: bold;
color: #343638;
}
.nizualisanelag li:before {
border: 3px solid transparent;
line-height: 35px;
position: absolute;
top: 0;
left:-29px;
width:41px;
text-align:center;
font-size: 14px;
font-weight: bold;
color: #619dce;
counter-increment: li;
content: counter(li);
transition-duration: 0.3s;

box-sizing: border-box;
}
.nizualisanelag li:hover:before {
color: #337AB7;
}
.nizualisanelag li:after {
position: absolute;
top: 0;
left: -29px;
width: 41px;
height: 41px;
border: 5px solid #468bd0;
border-radius: 50%;
content: "";
opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nizualisanelag li:hover:after {
animation: 500ms ease-in-out 0s bounceIn;
opacity: 1;
}

@keyframes bounceIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.3, 1.3, 1.3);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}

Идет с красивой анимацией.

4 Четвертый вариант:

• Первый элемент для сайта


• Второй элемент для сайта


• Третий элемент для сайта


• Четвертый элемент для сайта


• Пятый элемент для сайта

CSS

Padding:0;
list-style: none;
}
.kudezamuden li{
padding:6px;
}
.kudezamuden li:before {
padding-right: 11px;
font-weight: bold;
color: #4979a0;
content: "\2606";
transition-duration: 0.4s;
}
.kudezamuden li:hover:before {
color: #235e90;
content: "\2605";
}

Аналогичен предыдущей версий, только сам значок изменен.

Вообщем это небольшая подборка списков, даст веб мастеру сделать красивый список на портале, где сам может его больше оформить, как он сам хочет его видеть.

Если вам нужно помещать предметы в нумерованный список вместо маркированного, то здесь будет использоваться упорядоченных HTML. Этот список создается с помощью ol тега. Нумерация начинается с единицы и увеличивается на единицу для каждого последующего упорядоченного элемента списка с li тегом.

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

css

li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. 1 Посадить дерево
2. 2 Построить дом
3. 3 Вырастить сына

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

css

ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

• li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
• counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
  .
  1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
  2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .

подробнее о css-счетчиках можно посмотреть в

Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список.

Синтаксис тега

1. Элемент #1
2. Элемент #2
3. Элемент #3
4. ...

Где атрибут type="value" может принимать следующие значения

• A - задает маркеры в виде прописных латинских букв (A, B, C..);
• a - задает маркеры в виде строчных латинских букв (a, b, c..);
• I - задает маркеры в виде больших римских цифр (I, II, III, IV..);
• i - задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..);
• 1 (по умолчанию) - задает маркеры в виде арабских цифр (1, 2, 3..);

Атрибут start="value" задает начальное значение (стартовое значение) отчета.

Атрибут reversed задает обратный счет (в случае необходимости).

Тег

требует обязательного использования закрывающего тега

Для формирования элементов списка используется парный тег

1. . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.

   Примечание

   Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value="" у тега

2. , которому присваивается какое-то числовое значение. Например

   1. Элемент #1
   10. Элемент #2
   11. Элемент #3

   Примеры с нумерованными списками в html (

   )

   Пример 1. Нумерованный список html в виде латинских букв

   Пример с заглавными буквами

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Пример со строчными буквами

   1. Элемент #10
   2. Элемент #11
   3. Элемент #12

   Вот как это выглядит на странице:

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Пример 2. Нумерованный список html в виде римских букв

   Пример с заглавными буквами

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Вот как это выглядит на странице:

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Пример со строчными буквами

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Вот как это выглядит на странице:

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Пример 3. Нумерованный список html разная позиция старта

   Пример, который показывает возможности атрибута start , который позволяет задавать стартовое значение счетчика.

   50. Элемент #1
   51. Элемент #2
   52. Элемент #3

   Вот как это выглядит на странице:

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3

   Пример 4. Изменение счета в нумерованных списках html

   Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах

3. .

   10. Элемент #1
   11. Элемент #2
   100. Элемент #3
   101. Элемент #4

   Вот как это выглядит на странице:

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3
   4. Элемент #4

   Пример 5. Реверсивный нумерованный список в html

   Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).

   10. Элемент #1
   11. Элемент #2
   12. Элемент #3
   13. Элемент #4

   Вот как это выглядит на странице:

   1. Элемент #1
   2. Элемент #2
   3. Элемент #3
   4. Элемент #4