0

我正在使用 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>

问题可以看这里

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

任何帮助表示赞赏

4

1 回答 1

0

谢谢@Foundation MIRC 频道!

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

于 2013-10-07T10:55:12.477 回答