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屋!