試圖將水平導航（ul）分爲兩行

Question

使用PureCSS我試圖更改它們的Responsive Horizontal-to-Vertical Menu example以符合我的需要。

我想將一個水平導航分爲兩行，並且我嘗試使用css3列失敗，如Stackoverflow answer中所述。

我該如何解決這個問題？也許我必須重寫PureCSS設置的一些東西？

看到這個Plunker。請注意，橫向導航在1024像素以下的寬度中隱藏，所以將其寬度設置爲可以看到（水平）導航（對於較小的尺寸，也有垂直導航，這在此不太有趣）。

相關（自制）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。你想覆蓋white-space: nowrap;純設置.pure-menu-horizontal：

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>

這是你想要的，或者你要計算的項目，並確保他們是兩行之間平分？