Убрать точки li


И снова всем привет! Назрел еще один совет, которым хочу поделиться. Пару дней назад, верстая сайт, столкнулся с задачей сделать нумерованный список, но без «точек» в нумерации списка. Коротко загуглив, я понял, что родными свойствами CSS убрать точки в списке OL не получится. Поэтому пришлось искать другой изощренный метод для решения проблемы. Решение нашлось, им и хочу поделиться с вами.

Допустим у нас имеется нумерованный список OL (.our-list) такого вида:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в css-коде следующие правила:

.our-list { counter-reset: item; //item — переменная, которая будет содержать значение счетчика list-style-type: none; // убираем нумерование списка width: 150px; //необходимо задать ширину, чтобы отталкиваться от этого значения } .our-list li:before { content: counter(item) ""; //заново вставляем счетчик пунктов уже другим способом и без точки counter-increment: item; //увеличиваем значение счетчика color: #ff0000; //можем задать другой цвет цифрам }

В результате мы можем наблюдать следующее:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

Казалось бы, проблема решена. Но пока это хорошо работает только для однострочных пунктов. Если мы добавим строк к каждому пункту списка, то увидим, что пока еще все не так хорошо… Вот что получится:

  1. Пункт 1
    Строка 2
    Строка 3
  2. Пункт 2
    Строка 2
    Строка 3
  3. Пункт 3
    Строка 2
    Строка 3

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

.our-list { counter-reset: item; list-style-type: none; width: 150px; } .our-list li:before { content: counter(item) ""; counter-increment: item; color: #ff0000; float:right; //делаем обтекание справа position:relative; //и перемещаем цифры влево, чтобы они встали перед списком left:-165px; }

Вот теперь наблюдаем полноценное решение вопроса…

  1. Пункт 1
    Строка 2
    Строка 3
  2. Пункт 2
    Строка 2
    Строка 3
  3. Пункт 3
    Строка 2
    Строка 3

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

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