HTML5嵌套列表：缩进的列表项可能没有父级吗？ [英] HTML5 nested lists: Indented list item without parent possible?

问题描述

我正在基于 contenteditable DIV进行文本编辑。我想生成有效的HTML5，但遇到嵌套列表问题。

I'm working on a text editor based on a contenteditable DIV. I'd like to produce valid HTML5, but ran into problems with nesting lists.

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

The following two formatting examples seem to be impossible to create using valid HTML5 because they would require nesting a <ul> element as a direct child of the parent <ul>:

方案1：空父项

●

     ○嵌套项父级为空

     ○ nested item with empty parent

方案2：没有父级列表项的嵌套项

  ;   ○没有父项的嵌套项目

     ○ nested item without parent

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

I read https://stackoverflow.com/a/5899394/901334 and according to the HTML spec, the <ol> and <ul> elements must only contain <li> elements, but not other <ol> and <ul> elements.

但是，可以在内部创建这种格式转换nteditable DIV（请参见下面的jsbin）。那么浏览器该怎么做呢？

However, it is possible to create such a formatting inside a contenteditable DIV (see jsbin below). So how do browsers do it?

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

They do nest <ul|ol> inside the parent <ul> list! HTML produced like this results in a validation error.

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

Now if browser vendors resort to this workaround, I conclude that there really is no way to produce this formatting with valid HTML5 and hence it will be ok for me to use the same workaround of including <ul> as direct children of other <ul> elements.

可以在这里随意尝试：

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

推荐答案

我相信您希望 CSS set li indent 。

具体来说，
添加具有所需缩进量的CSS类。

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

下面是一个示例：

            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 }

这篇关于HTML5嵌套列表：缩进的列表项可能没有父级吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！