ul中有条件的换行符

Question

我在ul标签中有一个li元素列表。如果屏幕宽度小于625像素，我想在换行中显示最后两个。下面的代码运行良好：

<style>
    .NewLine { display: none; }
    @media screen and (max-width: 625px) { .NewLine { display: block; }}
</style>

<ul>
    <li>...</li>
    <li>...</li>
    <p class="NewLine"></p>
    <li>...</li>
    <li>...</li>
</ul>

但是它无法通过https://validator.w3.org/nu进行检查，因为不允许p与ul嵌套。还有哪些其他简单，有效和有效的解决方案？

Answer 1

如何将其包装在<li>中？这可能就是@Dialex的建议...

<ul>
    <li>...</li>
    <li>...</li>
    <li><p class="NewLine"></p></li>
    <li>...</li>
    <li>...</li>
</ul>

Answer 2

您可以使用伪元素在<li>之间创建新行，而无需创建html

li {
  display: inline;
}

li:nth-last-of-type(2)::before {
  content: '';
  display: block;
  /* demo */
  height: 2px;
  background: red
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>