zurb-foundation - Zurb 基础 5 - 顶栏搜索

Question

您是否遇到过 zurb 基金会的顶栏问题？ 输入框不适合导航。我没有修改任何东西，只是粘贴了来自 foundation's page 的代码到他们包含在基础文件中的示例网站。将字体更改为 Open Sans 也无济于事。

Answer 1

首先，Foundation 的造型 .top-bar input正在被更具体的样式覆盖 input[type="text"] .但是，即使您添加了 type属性，5.0.2 版本中的样式与示例中的样式略有不同。

要模仿示例的样式，请将以下内容添加到您自己的自定义样式表中，该样式表应添加在foundation.css 之后:

.top-bar input[type="text"], .top-bar .button {
    font-size: 0.77778rem;
    position: relative;
    top: 7px;
}

.top-bar input[type="text"] {
    height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.75rem;
}

编辑:添加 JSFiddle: http://jsfiddle.net/4vRNt/2/