使用基础顶部菜单将输入框对齐到右侧

Question

我正在使用ZURB的基础4建立一个响应式网站。

我正在尝试将登录表单对齐，而不在登录按钮旁边填充。

在遵循文档时，只有一个输入框（最初是搜索表单），按钮右侧没有填充

此代码实现了这一点，可以复制并由基金会docs提供：

  <form>
    <div class="row collapse">
      <div class="small-8 columns">
        <input type="text">
       </div>
       <div class="small-4 columns">
         <a href="#" class="alert button">Login</a>
       </div>
     </div>
   </form>

当我修改此代码以具有两个输入框时，将显示填充。 我已经尝试了一切我能想到的去除填充。 这是代码

  <form>
    <div class="row collapse">
      <div class="small-4 columns">
        <input type="text">
       </div>
       <div class="small-4 columns">
         <input type="password">
       </div>
       <div class="small-4 columns">
         <a href="#" class="alert button">Login</a>
       </div>
     </div>
   </form>

可以查看问题here

我还可以将登录按钮设置为展开，但这显然会使按钮比实际应该更大。

感谢任何帮助

Answer 1

谢谢@Foundation MIRC频道！

答案是给小柱提供小5，小5和小2的宽度，最后一个扩展按钮。