html - UL 在 LI 下，尽管有 block 和内联

Question

我的想法是在内联下放置一个 block 是不正确的。但是，在构建树结构时，我们在 li 下使用 ul。谁能解释为什么这是一个有效的 html？

Answer 1

li 属性的默认display 值不是inline，而是list-item。 ul 被设计为嵌套在列表中，因此将 ul 放在 li 中没有问题。

此外，从 HTML5 开始，将 block 元素放在内联元素中是有效的 HTML。

来自 MDN :

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.

但是，如果您不想将 block 元素放入 rendering 的行内元素中或其他原因，您可以选择更改 display 值:

<span style="display: block">
    <div style="display: inline"> ... </div>
</span>