Question

我想制作一个ul，它与flex-wrap分成几行。到目前为止，还不错，但是，如果有多行，我希望除最后一行以外的所有行都采用其余的行宽。因此，我在flex-grow: 1;上使用了li。但是，由于最后一行不应该有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 ？

（如果存在其他在这些行上使用flex-grow的CSS函数，我会很高兴，但是我不这么认为。）

我已经搜索了，但是我真的不知道如何搜索，所以找不到东西。

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的事情。它说：

作为一般规则，其内容模型允许任何流内容或短语内容的元素应在其内容中至少具有一个可感知的内容且未指定隐藏属性的节点。

此要求不是硬性要求，因为在许多情况下，元素可以合法为空，例如，当它用作占位符（稍后将由脚本填充）时，或者当该元素为模板的一部分，将在大多数页面上填写，但在某些页面上是不相关的。

因此<li>元素不应为空，但如果本身为空，则它本身不是无效的。但是，仅将元素用于样式并不是将其保留为空的理由。

空李仅用于样式；在HTML5中有效吗？

2 个答案: