后缀按钮，文字格式不好

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。