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

Question

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

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

按照文档进行操作时，只有一个输入框(最初是搜索表单(，按钮右侧没有填充

这段代码实现了这个目标，可以复制，并由基金会文档提供：

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

问题可以在这里查看

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

任何帮助不胜感激

Answer 1

感谢@Foundation MIRC 频道！

答案是给列提供小 5、小 5 和小 2 的宽度，最后有一个展开按钮。