仅用于样式的空 li；在 HTML5 有效？

Question

我想制作一个 ul，用 flex-wrap 分成几行。到目前为止一切顺利，但是，如果有多行，我希望除最后一行之外的所有行都占用该行的其余宽度。所以我在 li 上使用了 flex-grow: 1;。然而，由于最后一行不应该有 flex-grow 我只是在所有其他行之后放一个空的 li 并给它 flex-grow: 9999;，这样它们就不会占据整个宽度。（为了更好地理解，请参阅示例）

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
}

li:last-of-type {
  flex-grow: 9999;
}

/* Unimportant */

ul {
  list-style-type: none;
  text-align: center;
  width: 400px;
}

li {
  padding: 0.5em;
  background: blue;
}

li:hover {
  background: red;
}

<ul>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li></li>
</ul>

现在，我有一个问题：HTML5 是否允许仅出于样式原因而在末尾放置一个 li ?

（如果有另一个 CSS 函数可以在这些行上使用 flex-grow，我会很高兴，但我不这么认为。）

我已经搜索过这个了，但是我真的不知道怎么搜索，所以找不到。

Answer 1

完全正确，但可能有更好的方法。

您可以使用 CSS 伪元素来代替向您的代码添加额外的 DOM 元素。

弹性容器上的伪元素被视为弹性项目 (MDN)。 ::before 元素是第一项，::after 是最后一项。

试试这个：

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
}

ul::after {
  content: "";
  flex-grow: 9999;
}

/* Unimportant */
ul {
  list-style-type: none;
  text-align: center;
  width: 400px;
}

li {
  padding: 0.5em;
  background: aqua;
}

li:hover {
  background: red;
}

<ul>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
</ul>

有关更多信息和其他选项，请参阅这些帖子：

Answer 2

Michael_B 的回答显示了如何避免该问题。但是直接解决这个问题，这是关于 HTML5 规范称为 Palpable content 的事情。它说：

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents that is palpable content and that does not have the hidden attribute specified.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

所以<li>个元素应该不为空，但如果是空的话，本身也不是无效的。但是，仅用于样式化的元素并不是允许它为空的理由。

仅用于样式的空 li；在 HTML5 有效？

Empty li using for style only; valid in HTML5?

css

html

flexbox

html-lists

flex-grow