Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 27.05.2016, 20:13   #1
Bulat Ibrahim
Форумчанин
 
Регистрация: 24.04.2015
Сообщений: 199
По умолчанию Иконки на "линейном" списке (<li>)

Всем привет.
В HTML я сделал список, а в CSS дал им иконки (list-style-image), и построил их в линию (display: inline). Так в этом линейном режиме почему-то не показываются иконки. Если его отключить - то иконки нормально отображаются.
Можно ли как-то и иконки оставить у списка, и inline сделать? Или мне нужно в CSS в каждый тег li фоновое изображение прописать?
Булат Азат улы
Bulat Ibrahim вне форума Ответить с цитированием
Старый 27.05.2016, 21:04   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

display: inline; для элементов списка <li> отменяет собсна их стандартный display: list-item, соответственно и пропадают маркеры.
Для твоей задачи я бы юзанул псевдо-элемент li::before (li:before для ИЕ8, а адекватные браузеры поймут). Кури доку, можно сделать как "типа-<img>" через url, либо через background-image; я предпочитаю второй вариант.
Учти, что псевдоэлементы появятся только если задать им свойство content (как для урла), если будешь делать через фоновое изображение.
Ты сам спросил про фон для элемента списка, так вот: через псевдо-элемент удобнее управлять иконками, и можно собрать спрайт.
UPD: забыл сказать, в каких-то версиях ИЕ (не помню каких), display: inline; не отрубает list-style, так что лучше вручную выключить.
Alar, верни репу!

Последний раз редактировалось Naive; 27.05.2016 в 21:07.
Naive вне форума Ответить с цитированием
Старый 28.05.2016, 16:11   #3
mrtoxas
Пользователь
 
Аватар для mrtoxas
 
Регистрация: 15.07.2015
Сообщений: 14
По умолчанию

Не надо фоновое изображение, берется символ Unicode и добавляется через :before, как Naive предложил. Вот, например:
Код:
li:before { content:'\2022'; margin-right:0.2em;  }
li{display:inline; margin-left:10px;}
mrtoxas вне форума Ответить с цитированием
Старый 29.05.2016, 16:52   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от mrtoxas Посмотреть сообщение
Не надо фоновое изображение, берется символ Unicode и добавляется через :before, как Naive предложил. Вот, например:
Код:
li:before { content:'\2022'; margin-right:0.2em;  }
li{display:inline; margin-left:10px;}
надо, он же написал, что ставил маркером картинку
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Для заданной строки определить все входящие в неё символ. Например: строка "abccbbabbac" состоит из символов "a", "b" и "c" Sandakan01 Помощь студентам 1 24.02.2016 03:20