Как в 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.

Посмотреть пример

Перевод статьи “How to create a bullet list with no bullets in HTML” был подготовлен дружной командой проекта Сайтостроение от А до Я.

HTML, XML, DHTML, Интернет-технологии, похожие статьи

Создание сайта интересное и сложное дело, необходимо обладать определенными знаниями и навыками. Но мало сделать страничку, сайт нужно еще заниматься его продвижением и техническим обслуживанием. Этим занимаются Веб - дизайнеры, они предлагают свои услуги по работе в этой сфере...
HTML, XML, DHTML  |  24.07.2018
В начале 2018 года мы провели наш ежегодный опрос JetBrains Developer Ecosystem 2018, чтобы выяснить, чем сейчас живет мир программирования и как он изменился по сравнению с 2017 годом. Здесь мы поделимся самыми интересными результатами...
HTML, XML, DHTML  |  27.06.2018
Компания Microsoft совместно с  HeadHunter  провела исследование российского рынка труда, которое показало, что количество вакансий, где требуется навык программирования, стремительно растет, причем даже в сферах, не связанных с ИТ...
HTML, XML, DHTML  |  25.04.2018
  Герман Греф стремится трансформировать Сбербанк в цифровую компанию   Сбербанк запустил бета-версию мессенджера в мобильном приложении "Сбербанк Онлайн", убедились корреспонденты "Ведомостей". "Ведомости" ожидают ответ на запрос о комментарии от пресс-службы Сбербанка.
HTML, XML, DHTML  |  13.02.2018
HTML, XML, DHTML  |  14.12.2017  | 
Яндекс цитирования