在某一行（内联块）无序列表后插入一个中断

Question

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

＆＃13;

＆＃13;

.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;
}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以在第三个li上添加一个类，并在css中为该类提供一个底部：

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;       
   }
}

Answer 2

您可以使用li添加空height并在小屏幕上显示。

.menu li.hidden-sm 
{
display: none;
}
@media screen and (max-width: 859px) {
.menu li.hidden-sm {
    list-style: none;
    height: 20px;
        display: block;
}
}
@media screen and (max-width: 477px) {
.menu li
{
    display: block;
}

.menu li.hidden-sm
{
    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>
    <li class="hidden-sm"></li>
    <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>