Zurb Foundation 5-Topbar搜索 [英] Zurb foundation 5 - topbar search

问题描述

您是否在zurb Foundation的顶部栏上出现了该问题? 输入框不适合导航.我没有做任何修改，只是将基础页面中的代码粘贴到他们的示例网站包含在基础文件中.将字体更改为Open Sans也无济于事.

have you occured that problem with zurb foundation's topbar? The input box doesnt fit the navigation. I didnt modify anything, just pasting the code from foundation's page to their example website included into foundation files. Changing the font to Open Sans doesnt help too.

推荐答案

对于初学者而言，Foundation的.top-bar input样式已被更具体的input[type="text"]样式取代.但是，即使添加了type属性，5.0.2版中的样式也与示例中的样式略有不同.

For starters, Foundation's styling for the .top-bar input is being overridden by the styling for the more specific input[type="text"]. However, even if you added the type attribute, the styling in the 5.0.2 release is slightly different from that of the example.

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

To mimic the example's styling, add the following to your own custom stylesheet, which should be added after 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 /

Added JSFiddle: http://jsfiddle.net/4vRNt/2/

这篇关于Zurb Foundation 5-Topbar搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！