
Я не могу понять, как это сделать. Я пробовал использовать list-image, но цифры не появляются. Я попытался установить фон, но он не будет отображаться за номером, если для параметра list-style-position установлено значение «вне». Я попробовал установить его с фоном и позицией в стиле списка: внутри, затем поместить текст внутри li в div, чтобы выровнять его, но никакая комбинация плавающих точек, полей и т. д. не работала без обертывания цифры.
Это похоже на то, что я видел на многих веб-сайтах, но на данный момент я не могу найти рабочий пример, и поиск в Google не дает мне никаких результатов. результаты.
Итак, может ли кто-нибудь мне с этим помочь? Как бы вы создали все вышеперечисленное, используя HTML+CSS, в идеале без использования JS и определенно без использования только изображений? Этот текст должен быть доступным для выбора и копирования/вставки.
Поскольку один из комментаторов спросил, вот разметка, которая у меня сейчас есть:
- List item one.
- List item two.
- List item three.
Ни один из CSS, которые я пробовал, даже близко не работал, поэтому я не уверен, стоит ли делиться тем, что у меня есть на данный момент. Вот одна из версий, которая не удалась...
ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }
Подробнее здесь: https://stackoverflow.com/questions/573 ... of-circles
Мобильная версия