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

Question

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

我将 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，可以看到造成这个效果的buttonclass，去掉这个class 它工作得很好（我不知道为什么，也许一些 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。

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

Postfix button, text not formatted well

html

css

zurb-foundation

zurb-foundation-5