css - 为什么 li 项默认换行？

Question

基本的 CSS 问题。为什么默认情况下 li 项会换行？

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

block 元素最终出现在新行上，但它不在 MDN 的 block elements 列表中。相反，they are list-items他们的默认 CSS 是这样的:

li {
  display: list-item;
  text-align: -webkit-match-parent; }

我只是想看看是否有一个普遍的理解可以解释这一点，或者我是否必须了解列表是一种特殊情况。

丰富

Answer 1

CSS1 spec对于列表项元素说:

Elements with a 'display' property value of 'list-item' are formatted as block-level elements, but preceded by a list-item marker. The type of marker is determined by the 'list-style' property. The marker is placed according to the value of the 'list-style' property:

但是，MDN按以下方式描述他们对规范的实现，并说明列表项显示值:

...generates a block box for the content and a separate list-item inline box.

无论哪种方式，display:list-item都会生成一个 block 级元素，该元素通过在其内容之前和之后添加换行符来强制自己绘制在新行上。