Css 试图将水平导航（ul）分成两行

使用我正在尝试改变他们，以满足我的需要

我想将一个水平导航拆分为两行，但尝试使用css3列失败，如本文所述

我怎样才能解决这个问题？也许我必须重写PureCSS设置的东西

看这个。注意，水平导航在1024px以下的宽度是隐藏的，因此请将其调宽以查看（水平）导航（对于较小尺寸的导航，还有一个垂直导航，这里不感兴趣）

相关（自制）CSS为：

HTML：

  <div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-lg-1-5">
      <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Braand</a>
        <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
      </div>
    </div>
    <div class="pure-u-1 pure-u-lg-4-5">
      <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
          <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
          <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
          <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
          <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
          <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
          <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
          <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
          <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
          <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
        </ul>
      </div>
    </div>
  </div>

在多行上显示元素与

列

无关，而是与

换行

有关。您想要覆盖

空白：nowrap由Pure在
上设置。Pure菜单水平
：


div.pure-menu-horizontal{
空白：首字母；
}













答案正是我所需要的，谢谢！：）但我意识到我犯了一个错误，我的10个列表项需要5列（而不是2列），因此它们被平均分为两行。如果您只有10个项，您可以在
纯菜单项上使用
显示：flex
，在
纯菜单项上使用
flex-basis:20%
。如果菜单项的数量不同，则需要javascript对其进行计数。很高兴我能帮忙。这比空白处的建议好吗？此外，由于我们是在主题：）如果您选中，我已经添加了您的空白，但现在小屏幕垂直菜单不再正常工作（删除空白，请参阅，它应该是一个10行列表）。将我的css包装在
@media（最小宽度：ZZZpx）{…}
其中ZZZ是您不想再应用它的视口的宽度。再次感谢，这很好：）其他读者的信息：需要@media的是包含列的类，而不是包含空格的类（我的坏）
  <div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-lg-1-5">
      <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Braand</a>
        <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
      </div>
    </div>
    <div class="pure-u-1 pure-u-lg-4-5">
      <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
          <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
          <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
          <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
          <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
          <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
          <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
          <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
          <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
          <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
        </ul>
      </div>
    </div>
  </div>