可定制的导航/故障排除

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