html - 在某一行(inline-block)无序列表后插入一个中断

Question

我正在为不使用 Javascript 的 HTML/CSS 制作一个元素网站。 当屏幕达到某个最大值时，我目前正在努力在 2 个列表项之间添加一个中断。我找到的唯一解决方案是在列表之间添加一个分隔符，但我知道这是无效的。

.menu br 
{
display: none;
}

@media screen and (max-width: 859px) {
.menu br 
{
    display: inline-block;
}
}

@media screen and (max-width: 477px) {
.menu li
{
    display: block;
}

.menu br
{
    display: none;
}

main {
    position: static;
    margin: 10px;
}

body {
    min-width: 340px;
}
}

<nav>
  <h2>Menu</h2>
  <ul class="menu">
    <li class="pagina">Home</li>
    <li><a href="html/offerte.html">Aanvraag offerte</a></li>
    <li><a href="html/verhuur.html">Verhuur verhuiswagen of ladderlift</a></li>
    <br>
    <li><a href="html/stappenplan.html">Stappenplan verhuis</a></li>
    <li><a href="html/geschiedenis.html">Geschiedenis</a></li>
    <li><a href="html/contact.html">Contact</a></li>
  </ul>
</nav>

Answer 1

您可以在第三个 li 上添加一个类，并在 CSS 中为该类指定一个 margin-bottom:

HTML:

<li class="test">
   <a href="html/verhuur.html">Verhuur verhuiswagen of ladderlift</a>
</li>

CSS:

@media screen and (max-width: 859px) {
  .test {
      margin-bottom: 1rem;       
   }
}

@media screen and (max-width: 477px) {
   .test {
      margin-bottom: 0;       
   }
}