Zurb foundation 5 - topbar搜索

Question

您是否曾在zurb foundation的topbar中遇到过这个问题？ 输入框不适合导航。我没有修改任何内容，只是将代码从foundation's page粘贴到基础文件中包含的示例网站。将字体更改为Open Sans也没有用。

Answer 1

对于初学者来说，基金会对.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/