Задача
Отобразить маркированый список горизонтально без маркеров.
Решение
Тег маркированного списка
Вам уже должно быть известно, что в HTML есть блочные и строчные элементы. Строчные элементы не создают своих блоков, пример таких элементов - это теги или
. Блочные элементы отображаются с новой строки и создают прямоугольный блок, пример таких тегов Так вот, тег Чтобы тег За то, как элемент будет отображён в документе отвечает CSS свойство display
. Рассмотрим три его значения (хотя их больше): Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li
установлено свойство display
со значением inline
.
Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка: Рисунок 1. Работа примера №1.
У этого метода есть недостатки. Дело в том, что inline
элементы имеют некоторые ограничения, по сравнению с блочными элементами. Например им нельзя задавать ширину и высоту, а блочным можно. Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px
и высоту 40px
. Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:
Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block
. Изменим код нашего примера:
Этот код работает и изменения видны: Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:
Вот результат работы этого кода: Мы видим что блоки выравниваются по высоте не так, как нам хотелось бы. Конечно, можно указать для всех блоков одинаковую высоту, но не всегда нам заранее известно её точное значение, и оно может меняться. А собственно, почему так происходит? Наши блоки имеют свойство display
со значением inline-block
. Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем - это качество строчных элементов. Давайте рассмотрим строку с символами "А" разной величины: А
А
А
А
А
А
А
Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое. Для выравния текста по вертикали служит свойство vertical-align
. В нашем примере №3 нужно использовать значение top
, которое выравняет верхнюю границу элемента по верху самого высокого элемента строки. Пока применим его к строке с символами "А" разной величины: А
А
А
А
А
А
А
Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А". Свойство vertical-align
нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align . После этого отступления продолжим размещать элементы списка горизонтально. Разместить элементы списка горизонтально можно используя свойство float
. Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left
и right
. Вот пример с использованием этого кода:
Вот результат работы кода: Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display
и float
:
Вот результат работы кода: В этих примерах контейнеры списка При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1
в коде перед списком с классом menu-2
(сейчас он ниже). Вот что мы получим в результате: Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float
никто не отменял и оно распространяется на все последующие элементы. Как решить эту проблему? Для этого нужно использовать свойство clear
, оно отменяет обтекание элементом другого элемента, если у того установлено свойство float
. Вот изменённый пример с использованием свойства clear
:
Видно что нижний список уже не обтикает верхний, элементы не наезжают друг на друга. Но в первом списке теги Кроме того, в работе нам не всегда известно какой элемент будет следовать за элементом использующим float
. Идеальный был бы вариант закрытия работы свойства float
в том же блоке, в котором он открыт. Это делается при помощи псевдоэлемента. Вот код:
Теперь у нас 100% рабочий код. Этот приём со свойством float
обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо. Здравствуйте, уважаемые читатели блога сайт. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI - нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций. Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через . Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI. Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца. Давайте посмотрим, например, маркированный вариант, который может выглядеть так: Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки). Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI. Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок): В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера. Пример маркированного списка с различными типами маркера для каждого пункта: Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI. Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку: Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения: Пример нумерованного списка с различными типами нумерации для каждого пункта: При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например: Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например: Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а , для которых прописываются соответствующие свойства. Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей. Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — . Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений. Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD). Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина). Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные. Вложенный список
в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL. Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так: Удачи вам! До скорых встреч на страницах блога сайт Вам может быть интересно Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список. Синтаксис тега Где атрибут type="value"
может принимать следующие значения Атрибут start="value"
задает начальное значение (стартовое значение) отчета. Атрибут reversed
задает обратный счет (в случае необходимости). Тег Для формирования элементов списка используется парный тег Примечание
Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value=""
у тега Пример с заглавными буквами Пример со строчными буквами Вот как это выглядит на странице: Пример с заглавными буквами Вот как это выглядит на странице: Пример со строчными буквами Вот как это выглядит на странице: Пример, который показывает возможности атрибута start
, который позволяет задавать стартовое значение счетчика. Вот как это выглядит на странице: Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value
при выводе новых элементов в тегах Вот как это выглядит на странице: Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке). Вот как это выглядит на странице: Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера - обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность. С элементом На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка. Рис. 1. Вид маркированного списка Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type
или универсальное list-style
(пример 1). Применяются следующие значения: Пример 1. Изменение вида маркера
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к Пример 2. Использование::before
Результат данного примера показан на рис. 2. Поскольку использование свойства list-style
со значением none
не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent
с отрицательным значением. Его задача - переместить текст левее на один символ. Рис. 2. Произвольные маркеры в списке Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3). Рис. 3. Выбор символа в LibreOffice Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image
. В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3. Пример 3. Использование изображения в качестве маркера
Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок. Рис. 4. Рисунок в качестве маркера Применение list-style-image
обладает некоторыми недостатками: Этих недочётов можно избежать с помощью свойства background
, оно устанавливает фоновое изображение. Для каждого элемента списка Пример 4. Использование background Ul {
margin-left: -1em;
}
li {
list-style: none;
background: url(images/bullet.png) no-repeat 0 2px;
padding-left: 20px;
}
Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5). Рис. 5. Размещение маркеров относительно текста Чтобы управлять положением маркеров, применяется свойство list-style-position
. Оно имеет два значения: outside
- маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside
- маркеры являются частью текстового блока и отображаются в элементе списка (пример 5). Пример 5. Изменение положения маркеров
Результат данного примера показан на рис. 6. Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
В списке непременно должен присутствовать закрывающий тег В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице. Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1. Рис. 11.1. Вид маркированного списка Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически. Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type
тега Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста. Создание списка с квадратными маркерами показано в примере 11.2. Пример 11.2. Вид маркеров
Изменение убеждений Результат данного примера показан на рис. 11.2.
или
Рисунок 2. Работа примера №2.
Рисунок 3. Работа примера №3.
Второй способ
Рисунок 4. Работа примера.
Рисунок 5. Работа примера.
имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display
, включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float
выпадают из своего контейнера.
Рисунок 6. Работа примера.
.
Рисунок 7. Работа примера.
Рисунок 8. Работа примера.
. Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display
: inline-block
} в этих случаях вполне оправдано.
Маркированные списки на основе тэгов UL и LI
— закрашенный кружок (по умолчанию);
— не закрашенный кружок;
– квадрат
Нумерованные списки в Html на основе тэга OL
— нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
— заглавные буквы в качестве нумерации;
— строчные буквы;
— заглавные римские цифры;
— строчные римские цифры;
Оформление внешнего вида списков в CSS (таблицах стилей)
Специальные и вложенные списки в Html коде
посмотреть еще ролики можно перейдя на
");">
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
требует обязательного использования закрывающего тега
Примеры с нумерованными списками в html (
)
Пример 1. Нумерованный список html в виде латинских букв
Пример 2. Нумерованный список html в виде римских букв
Пример 3. Нумерованный список html разная позиция старта
Пример 4. Изменение счета в нумерованных списках html
Пример 5. Реверсивный нумерованный список в html
связаны следующие особенности:
, браузер автоматически добавляет перенос строки;
Вид маркера
Список с рисованными маркерами
Положение текста и маркера
inside
outside
, а каждый пункт списка начинается с тега
, иначе возникнет ошибка. Закрывающий тег
. Допустимые значения приведены в табл. 11.1
Табл. 11.1. Стили маркеров списка
Тип списка
Код HTML
Пример
Список с маркерами в виде круга
Список с маркерами в виде окружности
Список с квадратными маркерами
