尝试将水平导航 (ul) 拆分为两行

Question

使用 PureCSS I am trying to change their Responsive Horizontal-to-Vertical Menu example 来满足我的需要。

我想将水平导航分成两行，但我尝试使用 css3 列失败，如 Whosebug answer.

中所述

我该如何解决这个问题？也许我必须重写 PureCSS 设置的内容？

看到这个 Plunker。请注意，水平导航在宽度小于 1024px 时被隐藏，因此请使其变宽以查看（水平）导航（对于较小的尺寸也有垂直导航，此处不感兴趣）。

相关（自制）CSS是：

.pure-menu-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
    text-align: center;
}

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>

Answer 1

多行显示元素与columns无关，与wrapping无关。您想要覆盖 Pure 在 .pure-menu-horizontal:

上设置的 white-space: nowrap;

div.pure-menu-horizontal {
     white-space: initial; 
}

<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet"/>

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

这是您想要的还是您想要计算项目并确保它们在两行之间平均分配？

尝试将水平导航 (ul) 拆分为两行

Trying to split a horizontal nav (ul) into two rows

css

yui-pure-css