Как сделать список без маркеров в html

Добавил пользователь Дмитрий К.
Обновлено: 04.10.2024

Отобразить маркированый список горизонтально без маркеров.

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

За то, как элемент будет отображён в документе, отвечает CSS свойство display . Рассмотрим три его значения (хотя их больше):

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

Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline .

Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка:

Рисунок 1. Работа примера №1.

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

Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px и высоту 40px . Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:

Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block . Изменим код нашего примера:

Этот код работает и изменения видны:

Рисунок 2. Работа примера №2.

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

Вот результат работы этого кода:

Рисунок 3. Работа примера №3.

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

А собственно, почему так происходит?

Наши блоки имеют свойство display со значением inline-block . Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем – это качество строчных элементов.

Давайте рассмотрим строку с символами "А" разной величины:

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

Для выравния текста по вертикали служит свойство vertical-align . В нашем примере №3 нужно использовать значение top , которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.

Пока применим его к строке с символами "А" разной величины:

Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А".

Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align.

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

Второй способ

Разместить элементы списка горизонтально можно используя свойство float . Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right .

Вот пример с использованием этого кода:

Вот результат работы кода:

Рисунок 4. Работа примера.

Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float :

Вот результат работы кода:

Рисунок 5. Работа примера.

При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

Вот что мы получим в результате:

Рисунок 6. Работа примера.

Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float никто не отменял и оно распространяется на все последующие элементы.

Как решить эту проблему?

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

Вот изменённый пример с использованием свойства clear :

Рисунок 7. Работа примера.

Кроме того, в работе нам не всегда известно какой элемент будет следовать за элементом использующим float . Идеальный был бы вариант закрытия работы свойства float в том же блоке, в котором он открыт.

Это делается при помощи псевдоэлемента. Вот код:

Теперь у нас 100% рабочий код.

Рисунок 8. Работа примера.

Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами

. Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила < display : inline-block >в этих случаях вполне оправдано.

Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо.

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

Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):

нумерованный (упорядоченный) список – HTML элемент
маркированный (неупорядоченные) список – HTML элемент

CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.

Изменение типа маркера

Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type, оно задает тип маркера элемента списка.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer.

Давайте рассмотрим пример использования свойства list-style-type в тексте:

В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент ), а к маркированному списку (HTML элемент ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

Результат нашего примера:

Рис. 69 Пример использования свойства list-style-type (установка типа маркера).

В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат, а цвет текста указали зеленый. Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

Результат нашего примера:

Рис. 70 Пример чередования стилей свойства list-style-type.

Расположение маркера относительно элемента списка

С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside , а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside .

Давайте для наглядности рассмотрим пример, в котором помимимо свойства list-style-position используем еще одно новое свойство, которое позволит нам установить границы элемента.

Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье "Границы элемента в CSS".

Результат нашего примера:

Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

Создание собственных маркеров

Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

Синтаксис свойства следующий:

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

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

Давайте рассмотрим пример использования собственных маркеров в документе:

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

Результат нашего примера:

Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).

Изменение цвета маркера в CSS

Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент ), только уже необходимого для нашей задачи цвета.

Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:

Практическое задание № 18.
Продвинутое задание:

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Давайте поупражняемся в создании различных списков при помощи HTML. Будем составлять списки, нумеровать и маркировать их, делать вложенность. Как обычно будут и примеры, и скриншоты.

Что такое списки в HTML, какие они бывают

Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.

Какие бывают списки?

Нумерованный список;
Маркированный список (не нумерованный);
Многоуровневый список;
Список определений; .

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

Обратите внимание, список это не несогласованный набор словосочетаний-огрызков, отвечающих на разные вопросы обобщающего текста (которого как раз и нет в данном случае).

Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.

Где применяются списки?

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

HTML-практикум ч.1: как сделать упорядоченный нумерованный список

Нумерованные списки создаются при помощи тегов и , причем последний является тегом для перечисления однородных членов и помещается внутри тега (ol — ordered list).

Соответственно, — начало и конец элемента списка, а — начало и конец самого нумерованного списка.

Покажу на примере. Код:

ol >
li > Элемент №1 нумерованного списка; / li >
li > Элемент №2 нумерованного списка; / li >
li > Элемент №3 нумерованного списка; / li >
/ ol >

Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:

TYPE может принимать значения:

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

ol start = "17" >
li >Элемент № 1 нумерованного списка; / li >
li value = "289" >Элемент № 2 нумерованного списка; / li >
li value = "18" >Элемент № 3 нумерованного списка; / li >
li >Элемент № 4 нумерованного списка; / li >
/ ol >

HTML-практикум ч.2: маркированный список

Маркированные списки создаются при помощи тегов и , последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега (ul — unordered list).

Соответственно, — начало и конец каждого из элементов списка, а — начало и конец самого маркированного списка.

По умолчанию маркированные элементы списка отображаются в виде черных кружочков.

ul >
li >Элемент № 1 маркированного списка; / li >
li >Элемент № 2 маркированного списка; / li >
li >Элемент № 3 маркированного списка. / li >
/ ul >

ul style = "list-style-type:circle;" >
li >Circle № 1 маркированного списка; / li >
li >Circle № 2 маркированного списка; / li >
li >Circle № 3 маркированного списка; / li >
/ ul >

HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров

ul style = "list-style-type: none;" >
li >Элемент № 1 неупорядоченного ненумерованного списка; / li >
li >Элемент № 2 неупорядоченного ненумерованного списка; / li >
li >Элемент № 3 неупорядоченного ненумерованного списка. / li >
/ ul >

HTML-практикум ч.4: вложенный многоуровневый древовидный список

Особенность создания многоуровнего списка с вложенными списками заключается не только в его древовидности, но и в том, что ваш список может быть комплексным. То есть сочетать в себе, как маркированные, так и нумерованные элементы вместе. Древовидные вложенные списки часто можно встретить на Википедии, в разделе где показывается содержание страницы:

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

Проблема только одна — не запутаться в коде. Решается она либо внимательностью, либо созданием отступов для себя: чтобы в HTML было твердо и четко все разложено по полочкам — где что находится.

Я сделаю для вас один полноценный пример, чтобы наглядно показать, что и как.

ul style = "display: block; list-style-type: none;" >

HTML-практикум ч.5: как сделать список определений

Списки определений создаются при помощи тегов , и .

(dl — description list) — обозначает начало и конец списка определений;
(dl — description term) — обозначает начало и конец одного термина;
(dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.

Такой список по умолчанию получается многоуровневым и древовидным.

dl >
dt >Термин № 1 / dt >
dd >Определение № 1 для первого термина / dd >
dd >Определение № 2 для первого термина / dd >
dt >Термин № 2 / dt >
dd >Определение № 1 для второго термина / dd >
dd >Определение № 2 для второго термина / dd >
/ dl >

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

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

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

Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.

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

Виды HTML-списков

Списки бывают следующих видов:

. Перед элементом списка идет маркер. . Перед элементом списка идет номер. . Перед определением идет термин. . . Список состоит из нескольких уровней. может быть маркированным. нумерованным и комбинированным.

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

Маркированный список

unordered list

Стиль по умолчанию:

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Лев
Тигр
Леопард
Снежный барс

Маркер задается с помощью свойства list-style-type , для маркированного списка это свойство может иметь следующие значения:

Disc — точка.
Crcle — круг.
Square — квадрат.
None — убирает маркер.

Лев
Тигр
Леопард
Снежный барс

Получим следующий результат:

Нумерованный список

Стиль по умолчанию:

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Лев
Тигр
Леопард
Снежный барс

Тип номера так же, как и в маркированном списке, задается с помощью свойства list-style-type. Возможные значения:

Armenian — армянская нумерация.
Decimal — арабская нумерация.
Decimal-leading-zero — арабская нумерация с нулем впереди чисел меньше десяти, то есть 01, 02, 03 и так далее.
Georgian — грузинская нумерация.
Lower-alpha (lower-latin) — строчные латинские буквы.
Lower-greek — строчные греческие буквы.
Lower-roman — римские числа в нижнем регистре, например i, ii.
Upper-alpha (upper-latin) — заглавные латинские буквы.
Upper-roman — римские числа в верхнем регистре, например I, II.
None — без нумерации.

Атрибуты тега

Атрибут	Описание	Возможные значения
reversed	Указывает, что элементы списка расположены в обратном порядке.	Нет.
start	Задает первый порядковый номер списка.	Число.
type	Задает тип номера для использования в списке.	1: Десятичный: 1, 2, 3 и так далее. (По умолчанию) a: строчные буквы латинского алфавита: a, b, c и так далее. A: прописные буквы латинского алфавита: A, B, C и так далее. i: римские цифры в нижнем регистре: i, ii, iii и так далее. I: римские цифры в верхнем регистре: I, II, III и так далее.

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Список определений

Список определений создается с помощью тега — description list (список определений). Список определений состоит из пары термин — определение. Термин создается с помощью тега , а описание с помощью тега .

Стиль по умолчанию (тега ):

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

Собака Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов. HTML Язык гипертекстовой разметки. Язык, используемый для форматирования веб-документов.

Вложенный список

Аналогично можно вкладывать списки уже во вложенные элементы.

Многоуровневый список

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

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

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

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

Результат.

Выпадающий список

Как сделать выпадающий список в HTML? Довольно просто, с помощью тега

Элемент с атрибутом selected будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

Расшифровка и перевод используемых тегов

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

Тег	Значение	Перевод
	Unordered list	Неупорядоченный список
	List item	Элемент списка
	Order list	Упорядоченный список
Description list	Список описаний (определений)
Description list term	Термин (списка описаний)
Description list description	Описание термина (списка описаний)
Select	Выбор
Option	Вариант.

На этом изучение списков HTML заканчивается.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Читайте также: