Условный разрыв строки в ul

Question

У меня есть список элементов li в теге ul. Я хочу отобразить последние два в новой строке, если ширина экрана меньше 625 пикселей. Следующий код работает отлично:

<style>
    .NewLine { display: none; }
    @media screen and (max-width: 625px) { .NewLine { display: block; }}
    li { float: left; }
    ul { list-style: none; }
</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, установив его display: block

li {
  display: inline;
}


/* change media query value for snippet */

@media (max-width: 800px) {
  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>

---

ОБНОВЛЕНИЕ

Поскольку вы обновляете свой вопрос с остальной частью вашего CSS (что означает, что вы используете float: left в <li>. Вместо этого можно установить clear: left или clear: both для этого элемента

ul {
  list-style: none
}

li {
  float: left;
}


/* change media query value for snippet */

@media (max-width: 800px) {
  li:nth-last-of-type(2) {
    clear: left; /* both */
    /* demo */
    height: 2px;
    background: red;
  }
}

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

Answer 3

Поскольку вы используете float, просто очистите float после второго элемента, и вам не нужен дополнительный элемент или hack .

li {
  float: left;
  margin:5px;
  border:1px solid red;
  padding:5px;
}

ul {
  list-style: none;
}
@media  (max-width: 1200px) {
  li:nth-child(3) {
    clear:left;
  }
}

<ul>
  <li>AAA</li>
  <li>BBB</li>
  <li>AAA</li>
  <li>BBB</li>
</ul>