可定制的导航/故障排除

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