Zurb Foundation 5 - 顶部栏搜索答案

【问题标题】：Zurb foundation 5 - topbar searchZurb Foundation 5 - 顶部栏搜索
【发布时间】：2013-11-24 09:50:49
【问题描述】：

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

【问题讨论】：

如果您需要这方面的帮助，您必须显示一些代码。据我所知，您显然遗漏了一些东西，如果您真的只是复制和粘贴，那么搜索框的位置会有所不同。
对不起，代码是here。

【解决方案1】：

对于初学者，.top-bar input 的 Foundation 样式被更具体的 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/

【讨论】：

谢谢，它或多或少有助于输入。但我出现了下一个问题，当我放大浏览器的窗口时，导航完全中断，如that
你可以看到它在我上面添加的 JSFiddle 中工作。检查你的代码。