html - 后缀按钮，文本格式不正确

Question

我正在尝试使用 button postfix 类，但无法获得与演示页面相同的效果。

我从 http://foundation.zurb.com/docs/components/forms.html 复制粘贴代码进入包含所有 css/js 的 index.html 页面。

这是我期望的:

这是我得到的:

如您所见，Go 全部推向右侧。您应该能够通过在 index.html 页面中粘贴以下标记来重现此内容:

<div class="row">
  <div class="large-12 columns">
    <div class="row collapse">
      <div class="small-10 columns">
        <input type="text" placeholder="Hex Value">
      </div>
      <div class="small-2 columns">
        <a href="#" class="button postfix">Go</a>
      </div>
    </div>
  </div>
</div>

如何复制相同的外观？

编辑:这里是相关的 JSFiddle:https://jsfiddle.net/amencarini/h6sjb8L6/1/

Answer 1

看看 Working fiddle ，你可以看到产生这种效果的 button 类，通过删除这个类它工作得很好(我不知道为什么，也许一些 css 覆盖):

<div class="row">
    <div class="large-12 columns">
        <div class="row collapse">
            <div class="small-10 columns">
                <input type="text" placeholder="Hex Value"/>
            </div>
            <div class="small-2 columns">
                <a href="#" class="postfix" style='background-color: #008CBA;color:#FFF'>Go</a>
            </div>
        </div>    
    </div>
</div>

如果您想要与我的示例中相同的颜色，您可以添加一些内联 css。