Оформление списков ul li для информационных блоков

В этой заметке представлено несколько решений, которые помогут избавиться от стандартного вида списков <ul> <li>.

Преимущество данного оформления в том, что используется всего один класс: <ul class="CLASS">.

Такая конструкция сильно упрощает работу со списками в шаблонах и текстах.

Вариант 1a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 1b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 2a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 2b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 3a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 3b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 4a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 4b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 5a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 5b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

И, напоследок, самый простой, но и самый часто используемый вариант:

Вариант 6a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 6b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Владислав:

    Использовал метод 4а, спасибо.
    Было бы прикольно прикреплять сюда изображения, как применил способ.
    Как применил я — https://yadi.sk/i/ND2GI7NzeMMYAA

    Ответить
  • Сергей:

    Большое спасибо вам! Всё по-человечески сделано, всё удобно.

    Ответить
  • Тимур:

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

    Ответить
    • Alexander:

      Как сделаны свежие записи — тут:
      https://atuin.ru/blog/oformlenie-ssylok-v-tekste-dokumenta/

      А метки просто кнопки, где один фон меняется на другой.

      Ответить
  • Рустам:

    Спасибо! Интересные решения! Но у меня почему-то точка (списка) присутствует всегда в каждой строке списка. Вариант 4, например, в самом круге. Как от нее избавиться?

    Ответить
    • Alexander:

      Попробуйте добавить к li
      list-style: none;
      Если не поможет, то добавить important
      list-style: none!important;

      Ответить
  • Федор:

    Замечательно, все прекрасно работает (я взял Вариант 1a), вот только как сделать что бы таблица не занимала всю ширину страницы.
    И будет ли работать это в мобильной версии сайта (ex-hort точка ру).

    Ответить
    • Alexander:

      Она и занимает всю ширину (100%), чтобы подстраивается под разные размеры, включая мобильные.
      Чтобы ограничить ширину, можно вставить ее в блок заданной ширины (адаптивный) или добавить классу .list1a :
      max-width: 500px;

      Ответить
      • Федор:

        Просто замечательно, все получилось. Как подписаться на ваши обновления в блоге? Не делая заказа или не для получить консультацию.
        Хочу предложить вам разместить у меня статью с открытой индексируемой ссылкой. Пишите на почту. admin собака ex-hort.ru

        Ответить
        • Alexander:

          У блога подписки нет, есть группа в ВК, куда дублирую статьи
          https://vk.com/atuin_ru

          Ответить
  • Олег:

    Мало что то вариантов

    Ответить