时间戳

首页 > 解决方案 > HTML5 嵌套列表：可能没有父级的缩进列表项？

html - HTML5 嵌套列表：可能没有父级的缩进列表项？

问题描述

我正在开发基于contenteditableDIV 的文本编辑器。我想生成有效的 HTML5，但遇到了嵌套列表的问题。

以下两个格式化示例似乎无法使用有效的 HTML5 创建，因为它们需要将<ul>元素嵌套为 parent 的直接子元素<ul>：

场景 1：空父项

●

     ○ 父项为空的嵌套项

场景 2：没有父列表项的嵌套项

     ○ 没有父项的嵌套项

我阅读了https://stackoverflow.com/a/5899394/901334并根据 HTML 规范，<ol>and<ul>元素必须只包含<li>元素，而不能包含其他<ol>and<ul>元素。

但是，可以在contenteditableDIV 中创建这样的格式（参见下面的 jsbin）。那么浏览器是如何做到的呢？

它们确实嵌套<ul|ol>在父<ul>列表中！像这样生成的 HTML 会导致验证错误。

现在，如果浏览器供应商采用这种解决方法，我得出的结论是，确实没有办法使用有效的 HTML5 生成这种格式，因此我可以使用相同的解决方法来包含<ul>其他元素的直接子<ul>元素。

随意在这里尝试一下：

https://jsbin.com/cuyumovaga/1/edit?html，输出

标签： htmlcsshtml-listscontenteditable

解决方案

I believe you want a variation of the answer in CSS set li indent.

Specifically, add a css class that has the extra indent you want.

Here is an example:

            li { margin-left:10px }

            li.bonus { margin-left:100px }

You can change the bullet at the list level. For example:

            ul.bonus { list-style: none }

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

推荐阅读