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

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 频道！

答案是为列提供 small-5、small-5 和 small-2 的宽度，最后一个扩展按钮。