HTML5 вложенные списки: возможно ли использование отступа для элемента списка без родительского элемента?

Question

Я работаю над текстовым редактором на основе contenteditable DIV. Я хотел бы получить действительный HTML5, но столкнулся с проблемами со вложенными списками.

Следующие два примера форматирования, кажется, невозможно создать с использованием допустимого HTML5, поскольку они потребуют вложения элемента <ul> в качестве прямого потомка родителя <ul>:

Сценарий 1: пустой родительский элемент

●

○ вложенный элемент с пустым родительским элементом

Сценарий 2: вложенный элемент без родительского элемента списка

○ вложенный элемент без родителя

Я читаю { ссылка } и в соответствии с элементами HTML spe c, <ol> и <ul> должен содержать только элементы <li>, но не другие элементы <ol> и <ul>.

Однако возможно создать такое форматирование внутри contenteditable DIV (см. jsbin ниже). Так как браузеры это делают?

Они вкладывают <ul|ol> в родительский список <ul>! HTML, полученный как это, приводит к ошибке проверки

Теперь, если производители браузеров прибегнут к этому обходному пути, я прихожу к выводу, что на самом деле нет способа произвести это форматирование с допустимым HTML5, и, следовательно, для меня будет правильным использовать тот же обходной путь, включая <ul> как прямые потомки других <ul> элементов.

Не стесняйтесь попробовать сами здесь:

https://jsbin.com/cuyumovaga/1/edit?html, вывод

Answer 1

Я полагаю, что вам нужен вариант ответа в CSS set li indent .

В частности, добавьте класс css, который имеет дополнительный отступ, который вы хотите.

Вот пример:

            li { margin-left:10px }

            li.bonus { margin-left:100px }

Вы можете изменить маркер на уровне списка. Например:

            ul.bonus { list-style: none }

            ul.bonus li::before {content: "*"; color: red }

Answer 2

Интересная находка. Это действительно кажется невозможным.

Прежде всего, у меня нет окончательного ответа, но я не могу добавлять комментарии, я не ожидаю, что это правильный ответ для вас :). Это кажется действительно невозможным. Итак, вот мой 2ct:

• Сначала введите любой отступ (создайте blockqoute), затем добавьте ul / ol (до пользователя)
• Если вы можете использовать команду insert HTML или insertOrderedList, может быть, это сработает, но вам понадобится назначенная кнопка / действие для ul

В стороне: команда Exe c считается устаревшей

Может быть, это может помочь, JS lib, который, кажется, только что сделал невозможным отступ первого UL:

getcontenttools.com