顶部条形导航表单未在Foundation 5中对齐

Question

我正在阅读此处描述的教程http://foundation.zurb.com/docs/components/topbar.html，以便在顶部导航栏中创建水平表单。

我下载了基础zip并在index.html中添加了以下内容：

<nav class="top-bar">
<ul class="title-area">
    <li class="name">
        <h1><a href="#">Top Bar Title </a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
    </li>
</ul>
<section class="top-bar-section">
    <ul class="left">
        <li class="has-form">
                <div class="row collapse">
                    <div class="small-8 columns">
                        <input type="text">
                    </div>
                    <div class="small-4 columns">
                        <a href="#" class="alert button">Search</a>
                    </div>
                </div>
        </li>
    </ul>
</section></nav>

我得到的是：

虽然我正在考虑这个：

知道为什么输入文字和搜索按钮没有对齐？