Как в HTML создать маркированный список без маркеров

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

Пример HTML

Добавление стиля «list-style: none» в тег неупорядоченного(<ul>) или упорядоченного списка(<ol>) уберет любые маркеры или номера:

<ul style="list-style: none;"> <li>Элемент списка без маркера</li> <li>Второй элемент</li></ul>

Пример HTML с CSS

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

Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков(<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотели бы использовать вместо них картинки:

<style type="text/css"> ul { list-style-type: none; }</style>

Но лучше создать класс list style none CSS, который можно будет использовать в том случае, когда не необходимо показывать маркеры. Код CSS:

<style type="text/css">.nobull { list-style-type: none; }</style>

В приведенном выше коде CSS создается новый класс «nobull». Его можно без проблем задействовать в тех случаях, когда не необходимо показывать маркер. Например:

<ul class="nobull"> <li>Элемент списка без маркера</li> <li>Второй элемент</li></ul>

Подсказка: Этот класс можно применить для любого элемента списка(<li>), чтобы скрыть маркер напротив определенных элементов, но оставить иные маркеры.

Отображение примера

Ниже показано, как отображается на экран неупорядоченный список без маркеров при помощи list style type none.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *