html - 基金会 : Searchbar in Navbar stretches too far below

Question

我的 Foundation 导航栏存在设计问题:

基本上，搜索栏是关闭的(你可以看出它一直延伸到导航栏的底部。我的问题是:是否有任何我没有注意到的 CSS 技巧或错误导致了这个错误？我的基金会代码应该与 Zurb Foundation Doc 基本相同，所以我不知道发生了什么......

我们网站的网址是 http://calapps2.herokuapp.com代码在下面(在 Haml 中)。注意:当我在 Rails 中开发应用程序时，我喜欢使用最少的 CSS，因此除了 Foundation 代码之外我实际上不使用任何额外的 CSS。

%nav.top-bar{:data=>{:topbar => true}}
  %ul.title-area
    %li.name
      %h1=link_to "CalApps", '/'
  %section.top-bar-section
    %ul.left
      %li.has-form
        .row.collapse
          .large-8.small-9.columns
            %input{:type => "text", :placeholder => "Find"}
          .large-4.small-3.columns
            %a.alert.button.expand{:href => "#"} Search
      %li.divider

我所有的 CSS 都包含在一个语句中:

@import "foundation_and_overrides";
/* Add imports of custom sass/scss files here */

前面提到的 CSS 代码包含在这里:https://github.com/CS169-badjr/calapps/blob/master/app/assets/stylesheets/application.css.scss

在同一个文件夹中是 Foundation、normalize.css 和其他好东西的代码。

Answer 1

收件箱有 height 和 margin-bottom 属性，即类input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea

如果尝试更新或给收件箱指定特定的高度和边距，它不会超出您的导航栏。

示例 CSS

large-8 input
{
  height: 28px;
    margin: 0;
}

如果您无法修改给定的 CSS，您也可以尝试元素样式。