可自定義的導航/故障排除

Question

對於HTML5和一般編碼，我是一個完整的初學者......我一直在使用Zurb Foundation進行原型設計，並使用以下代碼來進行導航。它的工作原理是當縮小尺寸時（例如縮小瀏覽器或在手機上打開），按鈕會顯示而不是文本。

唯一的問題是，我希望導航排列在我的左上角放置的徽標的同一行，以及相互之間的水平佈局。現在，導航元素作爲簡單的鏈接文本堆疊在彼此之上。這是一個樣式表可編輯的特質嗎？任何有關可定製導航需要從何處開始或需要什麼代碼的建議？移動版本的ul類基本上搞亂了我的代碼？ （刪除它不會在全尺寸版本中產生任何差異...）非常感謝！搜索迄今爲止還沒有產生太多...

<div class="eight columns"> 
    <div id="navigation"> 
     <ul class="hide-on-phones"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">For Sale</a></li> 
      <li><a href="#">Contact or Visit Us</a></li> 
     </ul> 
     <ul class="show-on-phones"> 
      <li><a href="#" class="large black button">Home</a></li> 
      <li><a href="#" class="large black button">Services</a></li> 
      <li><a href="#" class="large black button">For Sale</a></li> 
      <li><a href="#" class="large black button">Contact or Visit Us</a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

問題是風格「大黑按鈕」。當您處於「移動」分辨率時，此樣式旨在擴展全屏寬度。您可以通過添加幾行CSS來創建您自己的按鈕元素。我在jsFiddle上爲你設置了一個演示，演示了它的工作原理。只需在jsFiddle上取下分隔線並縮小顯示屏，直到碰到「移動」斷點。

鏈接：http://jsfiddle.net/fumUp/1/

Code: 
    <!-- the inline style below should be moved to your CSS file --> 
    <style> 
     .mobile-nav a 
     { 
      border-radius:5px; 
      background-color:#000;  
      padding:5px 10px; 
     } 
     .mobile-nav li 
     { 
      float:left; 
      padding:5px; 
     } 
    </style> 
    <!-- /Inline style --> 
    <div class="row"><div class="eight columns"> 
      <div id="navigation"> 
       <ul class="hide-on-phones"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">For Sale</a></li> 
       <li><a href="#">Contact or Visit Us</a></li> 
       </ul> 
       <ul class="mobile-nav show-on-phones"> 
       <li><a href="#" class="simple-radius">Home</a></li> 
       <li><a href="#" class="simple-radius">Services</a></li> 
       <li><a href="#" class="simple-radius">For Sale</a></li> 
       <li><a href="#" class="simple-radius">Contact or Visit Us</a></li> 
       </ul> 
       </div> 
      </div> 
    </div>​​​​​