Горизонтальное расположение вопроса может быть достигнуто с помощью CSS float и / или display:inline-block;.Они хорошо документированы для этого, поскольку элементы списка часто используются для создания раскрывающихся меню с использованием этой техники, поэтому я не буду обсуждать это здесь далее.
Аспект с обведенными цифрами немного сложнее.
Этого нельзя достичь с помощью стандартных стилей списка, если вы не готовы использовать графику и жестко закодировать название каждого из них.Это довольно старый подход, и я подозреваю, что это не то, что вы ищете.
Одна идея, которая пришла мне в голову, - это использовать шрифт, номера которого в кружках, такие как этот , а затем просто стилизуйте элемент <ol> для использования этого шрифта и элемент <li> для использования вашего обычного шрифта.Недостатком этого является то, что вы должны держать свой список ниже 10 пунктов, и браузер пользователя должен будет загрузить целый шрифт только для этого.Кроме того, вам нужно будет выбрать тот, который совпадает с другими шрифтами на вашем сайте.Возможно, это не идеальное решение, но оно бы сработало.
Более практичным решением было бы полностью отказаться от стиля списка (по-прежнему использовать ту же разметку HTML, но установить list-style:none;).Затем числа будут вставлены с использованием малоиспользуемых функций CSS :before и count().
В вашем случае это будет выглядеть следующим образом:
ol ul:before {
content: counter(mylist);
}
Это даствы же пронумерованные последовательности.Затем вам нужно будет добавить дополнительные стили к селектору выше, чтобы придать ему фон круга, несколько цветов и немного поля.Вам также нужно как-то стилизовать элемент <li>, чтобы весь текст был с отступом от числа, а не для переноса ниже числа.Я ожидаю, что это можно сделать с помощью display:inline-block; или аналогичного.
Возможно, потребуется немного поэкспериментировать, и я не дал полного ответа, но метод определенно сработает.
См. quirksmode.org с описанием и примерами, а также диаграмму совместимости браузера.
И диаграмма совместимости браузера дает подсказку об одном из основных недостатков этого метода:не будет работать в IE7 или ранее.Тем не менее, он работает в IE8 и во всех других браузерах, так что если вы можете жить с пользователями IE7, которые его не видят (а их сейчас не так много), то все будет хорошо.